推荐 语 


(排名 不 分 先后 ) 


许多 UED 与 产品 团队 一 直 都 在 寻求 一 套 完整 的 体验 设计 方法 体系 来 推动 产品 用 尸体 验 的 创新 ， 以 拥抱 技术 的 趋势 ， 识 别 由 
新 技术 、 新 商业 的 友 展 而 产生 的 用 户 新 需求 。 迅 雷 团 队 总 结 和 优化 的 EDM3 (Experience Design Method System) 给 行业 市 
来 一 套 整 体 化 的 设计 思路 ， 从 战略 屋 、 汇 围 屋 、 结 构 层 、 框 架 层 、 表 现 层 这 五 个 层面 ， 详 细 解 析 体 验 构建 的 思路 和 万 ;去 。 同 时， 
还 深入 介绍 “设计 OKR” 在 体验 设计 方法 体系 下 的 制定 方法 ， 为 推动 和 促进 产品 的 用 尸 价值 与 商业 价值 的 实现 市 来 丰富 的 实践 


案例 。 
胡 了 晓 ， 国 际 体验 设计 协会 (IXDC) 秘书 长 


迅雷 的 产品 设计 团队 终于 出 版 了 这 本 源 目 多 年 产品 实践 的 图 书 。 在 一 线 工 作 中 形成 目 己 团队 的 方法 论 体 系 ， 是 一 个 团队 成 长 
的 里 程 碑 ， 相 信 书 中 的 案例 对 大 家 有 参考 价值 。 


兰 军 ， 梅 沙 科技 创始 人 
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产品 体验 设计 完整 过 程 。 书 中 更 重 结合 实战 案 ， 这 与 我 一 直 喜 励 设计 师 要 企 产品 中 成 长 不 谋 而 合 。 书 中 涉及 的 内 容 从 产品 定位 、 

用 户 体验 到 产品 的 每 一 个 环节 ， 再 到 设计 上 的 每 一 个 细节 ， 都 能 让 我 感到 迅雷 团队 对 产品 和 设计 的 精 蔡 求 精 ， 以 及 他 们 反复 推 

融 、 不 断 打 磨 的 匠人 之 心 。 本 书 对 产品 设计 经 验 的 总 结 和 思考 无 疑 对 设计 师 的 成 长 有 很 大 的 帮助 ， 可 以 况 是 十 足 的 干货 。 感 谢 迅 
雷 团队 在 产品 体验 设计 道路 上 的 努力 。 


朱 君 ，UI 中 国 创 始 人 
迅雷 设计 团队 的 EDMS 体 系 结合 了 众多 经 典 体验 设计 和 团队 运作 方法 的 长 处 ， 并 可 运用 在 从 体验 到 商业 、 从 概念 到 优化 等 各 


个 互联 网 设计 工作 场景 。 推 荐 从 事 互联 网 设计 工作 的 设计 师 和 团队 吸收 借鉴 这 套 可 预期 、 可 执行 、 可 监控 的 互联 网 设计 方法 体 
系 。 


纪 晓 亮 ， 站 酷 网 主编 
迅雷 看 似 一 个 下 载 工具 ， 在 默默 地 帮助 用 户 轻快 地 享受 互联 网 的 海量 内 容 。 其 背后 是 一 文 一 直 坚 持 努 力 的 设计 团队 在 做 体验 
的 支撑 。 这 本 书 正 是 这 个 团队 多 年 来 打磨 体验 、 打 磨 产 品 的 经 验 提 炼 ， 对 广大 互联 网 从 业者 和 设计 从 业者 来 说 是 很 有 价值 的 分 
享 。 
陈 妍 ， 腾 讯 用 户 研 究 与 体验 设计 部 总 经 理 
优美 的 语言 从 来 不 缺乏 聆听 者 ， 而 精益 的 设计 束 是 这 样 一 种 令 人 着 迷 的 语言 。 无 论 是 游戏 设计 还 是 互联 网 产品 设计 ， 利 用 这 
种 语言 都 可 以 建立 与 用 户 之 间 的 信任 ， 帮 用 户 消 除 疑 惑 ， 甚 至 可 以 给 用 户 珊 来 愉悦 与 享受 。 本 书 打开 了 迅雷 UED 团 队 的 大 门 。 
大 家 通过 本 书 可 读 实 际 案例 ， 悟 设计 价值 。 
王 海 银 ， 人 金山 软件 西山 后 GEC 设 计 总 监 
体验 设计 对 我 来 说 不 是 个 阳 生 的 词汇 。 都 襄 好 的 设计 目 己 会 说 话 ， 此 话 不 假 。 陪 伴 了 大 多 数 80 甚 至 90 后 度 过 了 青花 岁月 的 


迅雷 下 载 也 印证 了 迅雷 UED 团 队 的 付出 及 价值 。 本 书 中 也 通过 一 个 个 实例 记录 着 这 个 设计 团队 为 打造 更 舒适 的 用 尸体 验 而 做 出 
的 各 种 尝试 及 在 体验 优化 方面 的 努力 ， 我 相信 读者 可 以 从 中 看 到 一 个 优秀 的 设计 师 是 如 何 通 过 整体 及 细节 打磨 来 提升 产品 的 用 户 


价值 与 商业 价值 的 ， 这 也 是 优秀 设计 的 本 原 。 


汪洋 ， 云 麦 科 技 董事 长 CEO 
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坚信 只 有 整合 产品 和 服务 各 方面 的 体验 设计 ， 才 能 创造 更 大 的 用 户 价 值 和 商业 价值 。 无 论 你 是 设计 师 、 产 品 经 理 还 是 创业 
者 ， 迅 雷 用 户 体验 团队 在 本 书 中 所 展现 的 思考 和 实践 ， 都 能 给 你 很 好 的 局 友 。 


吴 车 浩 ， 创 新 工场 人 工 物 能 工程 院 副 总 裁 


作为 一 球 陪伴 用 己 十 余年 的 产品 ， 依 然 保持 着 极 高 的 吸引 力 和 用 尸 蔡 性 ， 这 本身 束 足 以 证 明 产 品 设计 团队 的 价值 和 功力 。 该 
团队 将 宝贵 的 项 目 经 验 提炼 成 可 传播 的 文字 并 车 成 本 书 。 书 中 记录 着 每 一 次 打磨 产品 细 书 、 改 善 提 升 用 尸体 验 、 友 所 商业 价值 的 


过 程 。 从 产品 的 每 一 次 量变 到 质变 ， 相 信 你 能 够 感受 到 设计 的 力量 。 
凌 飞 ， 京 东 JDC 多 终端 研发 部 总 监 


《设计 力 》 延 承 并 创新 了 Garrett 的 用 户 体 验 五 要 素 ， 从 而 构成 一 套 体 验 设 计 的 方法 体系 EDMS， 并 做 运用 到 不 同 的 案例 
中 。 这 套 方 法 体系 在 天 于 商业 价值 和 用 户 价值 如 何平 衡 的 问题 上 给 出 了 满意 的 答案 ， 值 得 推荐 学 习 。 


林 头 鹏 ， 连 接 资本 创始 人 


近 十 年 互联 网 飞速 友 展 ， 同 步 造 丈 了 很 多 优秀 而 卓越 的 产品 设计 团队 ， 其 中 丈 包 含 了 迅雷 的 UED 团 队 。《 设 计 力 》 从 迅雷 
操作 过 的 实际 案例 出 友 ， 从 “用 户 产 品 体验 、 商 业 化 价值 、 品 牌 塑造 ”等 多 方面 ， 解 读 体 验 设 计 思 路 及 过 程 ， 沉 泥 切 合 实际 的 方 


法 论 ， 非 常 值得 一 读 。 


ЕЗ 
人 、 
赵 润 ， 迅 震 商 业 运营 总 监 


" 兵 无 党 势 ， 水 无 常 形 ， 能 因 政 变化 而 取胜 者 ， 谓 之 神 ”， 由 此 可 见 ， 实 战 是 最 好 的 教科 书 ， 每 一 个 实战 案例 背后 都 缠 减 着 
宝贵 的 思路 与 辨证 过 程 ， 这 超越 了 所 有 的 理论 。 本 书 全 部 是 迅雷 UED 团 队 实 际 项 目的 设计 和 总结 和 案例 分 享 ， 满 满 的 干货 ， 值 得 


一 读 。 
程 峰 ， 滴 滴 出 行 高 级 设计 总 监 
= 
Н] = 
为 何 写 作 本 书 


什么 样 的 设计 才 是 好 的 设计 ? 这 个 问题 在 业界 一 直 都 有 不 同 的 声音 : 有 人 认为 以 用 户 为 中 心 的 设计 才 是 好 的 设计 ; 有 人 认为 
用 尸 有 时 候 也 不 知道 自己 想 要 什么 ,我 们 应 该 给 他 们 提供 一 些 新 的 体验 和 尝试 。 两 个 观点 并 不 矛盾 ， 都 是 为 了 解决 用 户 需 求 和 用 
尸体 验 的 问题 。 然 而 仅仅 满足 了 用 户 需 求 和 用 尸体 验 还 是 远 远 不 够 的 。 互 联网 产品 成 熟 后， 都 会 进行 商业 化 ， 此 时 设计 师 需 要 被 
赋予 更 大 的 使 命 和 责任 。 用 尸体 验 设计 是 完成 产品 目标 的 一 个 重要 而 非 全 部 的 途径 ， 对 于 商业 产品 ,设计 目标 需要 考虑 和 涵盖 业 
务 的 商业 目标 。 


这 些 年 来 ， 迅 雷 在 设计 方面 有 过 很 多 尝试 、 实 践 和 创新 ， 也 踩 过 不 少 坑 。 比 如 之 前 我 们 做 产品 设计 时 没有 清晰 的 设计 目标 和 


设计 评估 指标 ,我们 只 是 基于 基础 的 理论 知识 ,凭借 设计 师 的 经 验 和 技术 ， 本 着 满足 产品 需求 的 方式 去 完成 每 一 个 设计 。 单 纯 围 
绕 产 品 业务 目标 的 设计 往往 是 以 伤害 用 尸体 验 为 代价 的 。 册 比如， 对 创新 设计 没有 足够 的 重视 。 记 得 设计 迅雷 文件 邮 时 ， 为 了 快 
速 推进 项 目 上 线 ， 当 时 仅 赁 着 设计 师 的 感 党 进行 快速 堆 蔷 设计， 缺少 对 用 尸 的 研究 ， 也 没 思 考 清楚 用 户 的 需求 和 目标 ， 缺 乏 设计 
创新 ， 最 终 导 致 产品 没有 被 用 尸 认 可 。 


我 们 在 成 功 和 失败 的 经 验 中 总 结 和 构建 了 一 套 体验 设计 体系 (Experience Design Method System, EDMS) ， 我 们 称 之 
为 EDMS3 体 系 。 这 套 设计 体系 让 我 们 的 设计 工作 有 了 一 定 的 思路 和 方向 ， 在 迅雷 的 商业 化 中 发 挥 着 重要 的 作用 ， 创 造 了 很 大 的 价 
值 。 比 如 在 手机 迅雷 5.0 改 版 过 程 中 通过 应 用 这 套 设计 体系 ， 使 设计 更 符合 当时 的 产品 定位 ， 使 核心 功能 更 加 凸显 上 且 易 用 ， 带 来 
了 用 户 的 高 速 增长 ; 同时 优化 了 迅雷 会 员 的 付费 场景 、 支 付 流程 及 支付 逻辑 ， 使 会 员 数 量 翻 倍 提升 从 而 实现 了 产品 商业 目标 。 迅 
雷 会 员 官网 的 改版 设计 也 是 在 EDMS 体 系 的 助力 下 协助 产品 运营 人 员 提 升 了 各 项 数据 指标 。 


迅雷 的 这 些 经 验 和 经 历 ， 不 仅 对 迅雷 有 用 ， 对 其 他 企业 同样 有 价值 。 为 了 帮助 大 家 少 走 弯路 ， 我 们 决定 将 这 套 体 系 思 结 杭 理 
出 来 ， 分 享 给 更 多 的 人 。 我 们 将 本 书 命名 为 《设计 力 : 迅雷 商业 化 设计 中 的 方法 论 与 最 佳 实践 》， 玖 是 要 赋予 设计 师 更 大 的 责任 
和 使 命 。 通 过 本 书 ， 我 们 不 仅 想 把 迅雷 这 几 年 在 商业 化 设计 中 的 理念 、 方 法 论 以 实际 案例 的 形式 分 享 给 大 家 ， 更 想 和 大 家 进一步 
探讨 设计 在 产品 体验 方面 的 用 户 价值 、 在 业务 方面 的 商业 价值 ， 甚 至 在 行业 生态 链 方 面 的 价值 。 


本 书 读者 对 象 
这 不 是 一 本 纯 进 设计 的 书 ， 因 为 纯 讲 扩 林 不 是 我 们 的 急 囊 。 本 书 的 读者 对 象 很 广 ， 主 要 分 为 两 大 类 。 
第 一 类 : 一 线 的 设计 师 、 前 端 工 程 师 和 产品 经 理 


对 于 那些 刚刚 入 门 的 一 线 设 计 师 以 及 在 实际 工作 中 有 着 丰富 经 验 但 是 理论 基础 相对 匮乏 的 设计 师 ， 我 们 专门 在 本 书 中 安排 了 
第 1 章 ， 这 一 章 移 行 展开 理论 前 述 和 EDM3s 体 系 方法 解读 ， 后 面 则 采用 理论 所 导 实践 的 方式 ， 基 于 迅雷 实际 项 目 ， 论 述 从 0 到 1 的 
产品 设计 过 程 ， 及 从 有 到 优 的 设计 优化 过 程 ， 从 而 帮助 设计 师 提 升 目 身 的 理论 知识 。 这 部 分 内 容 会 在 设计 师 之 后 的 实践 工作 中 起 
到 指导 设计 的 作用 。 

设计 的 上 下 游 一 般 为 产品 经 理 和 前 端 工程 师 ， 在 二 者 固有 的 认 知 中 ， 设 计 师 往往 只 关注 创 意 ， 很 少 考虑 产品 方向 和 技术 实 
现 。 在 本 书 中 我 们 市 大 家 走 进 设计 师 的 日 常 工作 ， 理 解 设计 师 的 工作 流程 和 工作 方法 ， 比 如 在 设计 前 期 ， 设 计 师 会 做 哪些 设计 准 
备 来 思考 产品 的 定位 、 产 品 的 业务 目标 及 实现 成 本 等 。 在 读 完 本 书后 大 家 对 设计 师 的 工作 会 有 更 安 观 的 认识 ， 这 对 以 后 与 设计 师 
协同 工作 会 产生 民 好 的 促进 作用 。 


第 二 类 : 企业 的 管理 者 和 经 营 者 、 设 计 团队 的 管理 者 
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产品 
早已 从 锦上添花 的 业务 支撑 转变 为 协助 产品 甚至 企业 友 展 的 重要 战略 ， 如 苹果 公司 ， 从 濒临 破产 到 改变 世界 ， 让 世人 见 到 了 设计 
的 力量 。 本 书 通过 介绍 迅雷 的 实际 项 目 经 历 向 管理 者 展示 了 设计 师 如 何 从 战略 层面 上 推动 产品 的 友 展 ， 进 而 促进 用 己 量 和 商业 价 


值 的 提升 。 相 信 对 大 家 在 公司 项 目 运作 方面 会 具有 一 定 的 司 及 意义 。 
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对 于 设计 团队 的 管理 者 ， 通 过 对 本 书 的 阅读 ， 可 以 了 解 到 迅雷 的 管理 者 是 如 何 市 领 目 己 的 设计 团队 来 总 结 和 沉 泥 设计 方法 体 
系 ， 再 运用 到 工作 中 ， 最 终 友 挥 作用 和 价值 的 。 通 过 本 书 ， 可 以 帮助 设计 团队 的 管理 者 优化 和 完善 目 身 的 设计 方法 体系 ， 提 升 管 
理 效率 和 管理 价值 。 


本 书 核心 内 容 


本 书 开 门 见 山 ,第 1 草 “ 体 验 设计 万 法 体系 EDMS 与 实战 案例 ” 即 是 本 书 核心 内 容 。EDMS 是 我 们 在 商业 化 设计 中 通过 实践 
总 结 的 一 套 行 之 有 效 的 整体 化 设计 思路 。 本 书 详细 解析 了 EDMS 的 构建 思路 和 方法 ， 同 时 结合 实战 案例 让 读者 更 清楚 这 套 体系 如 
何 应 用 ， 以 及 如 何 提高 产品 体验 和 商业 营 收 。 设 计 效 果 可 以 和 商业 指标 对 接 ， 从 用 尸体 验 维度 设 定 一 系列 的 数据 指标 ， 通 过 数据 
指标 来 衡量 和 验证 设计 效果 ， 让 数据 说 话 。EDMS 设 计 思 考 维度 涵盖 体验 要 素 的 战略 层 、 泡 围 层 、 结 构 层 、 框 染 层 和 表现 层 ， 它 
不 仅 是 一 种 方法 和 流程 ， 也 是 对 设计 更 全 面 的 定位 和 体现 设计 价值 的 一 种 工作 思维 方式 。 此 外 ， 我 们 还 总 结 了 关于 运营 设计 、 品 
牌 设计 、 创 新 设计 的 实战 案例 ， 让 设计 师 在 目 身 成 长 方面 有 更 加 明确 的 方向 ， 在 业务 提升 方面 有 可 靠 的 依据 。 


本 书 特色 


以 用 尸体 验 为 核心 出 友 后 的 书籍 市 场 上 有 很 多 ， 本 书 与 其 他 书籍 相 比 ， 显 车 的 不 同 之 处 在 于 我 们 在 尊重 用 尸体 验 的 基础 上 ， 


以 商业 化 设计 为 目标 导向 ， 并 寻求 商业 价值 和 用 尸体 验 之 间 的 平衡 后 。EDMS 的 万 法 理念 ， 使 设计 师 能 更 全 面 地 参与 到 项 目 流程 
中 来 ， 站 在 战略 的 角度 看 问题 ， 让 设计 为 产品 的 商业 价值 赋 能 ,后 面 也 有 独立 的 草 节 介绍 “平衡 商业 价值 与 用 户 价 值 的 设计 之 
路 ”。 


设计 方法 论 与 实战 案例 的 结合 是 本 书 的 一 大 特色 。 书 中 完整 、 详 细 地 讲解 了 几 个 重量 级 产品 大 改版 中 商业 化 设计 的 全 过 程 ， 
如 第 1 草 中 的 迅雷 9 的 诞生 、 手 机 迅雷 目标 导向 设计 等 ; 也 有 关于 产品 型 官网 设计 的 总 结 ， 如 页 游 官网 设计 的 细节 与 情怀 ;还 有 
公司 品牌 官网 创意 设计 的 总 结 ， 在 “迅雷 企业 品牌 演化 : LOGOTYPE 设 计 之 美 ” 和 “有 ' 计 ”可 循 的 产品 品牌 设计 ”两 节 中 ， 
我 们 详细 介绍 了 品牌 的 设计 过 程 与 方法 ， 让 品牌 设计 同样 拨 云 见 日 。 这 泽 全 部 是 迅雷 设计 团队 多 年 实战 经 验 的 总 结 与 沉 泥 。 
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转眼 间 加 入 迅雷 CUED 团 队 已 有 几 个 春秋 了 ， 在 迅雷 的 这 几 年 ， 我 看 到 的 是 整个 团队 都 在 不 断 进 步 。 早 期 的 设计 师 可 能 更 多 
是 在 做 执行 ， 设 计 的 价值 难以 受 得 重视 ， 很 难 在 项 目前 期 介入 并 友 挥 影响 力 。 在 互联 网 时 代 ， 设 计 师 的 主要 职责 早已 不 是 UI 界 
面 的 美化 ， 而 是 被 赋予 更 大 的 责任 和 能 成 为 串联 用 户 体 验 和 商业 价值 的 桥架。 团队 中 越 来 越 多 有 经 验 的 设计 师 在 项 目前 
期 残 与 产品 、 运 宫 等 人 员 展 开 深 度 合作 ， 一 起 探索 产品 的 方向 ， 从 全 局 的 角度 制定 设计 方案 ， 在 多 方 限 制 的 条 件 下 努力 争取 商 
业 、 用 户 、 技 术 等 多 方面 的 平衡 ， 设 计 的 价值 也 随 之 得 到 更 大 的 肯定 。 


互联 网 行业 这 几 年 友 展 很 快 ， 经 历 了 PC 时 代 的 浪潮 之 其、 移动 互联 网 时 代 的 飞速 友 展 ， 以 及 人 工 智 能 、 虚 拟 世界 的 凯 起 ， 
这 丈 要 求 设计 人 员 的 专业 技能 和 思维 高 度 都 要 与 时 俱 进 。 然 而 ， 忆 有 一 些 设计 方法 和 理念 是 通用 和 普 适 的 ， 我 们 试图 通过 文字 等 
方式 将 这 些 传承 给 更 多 互联 网 从 业者 。 


在 迅雷 ， 我 很 落 垃 参与 了 公司 很 多 核心 产品 的 商业 化 设计 工作 。 我 们 从 来 没有 停止 对 设计 方法 的 探索 和 有 学习， 每 当 产 品 进入 
一 个 里 程 碑 级 的 阶段 ， 我 们 都 会 进行 深入 的 总 结 和 分 享 ， 通 过 对 成 功 项 目的 分 类 和 整理 ， 逐 渐 构 建 了 一 套 行 忆 有 效 的 设计 体系 
一 一 EDMS 体 验 设计 体系 。 这 套 体系 以 用 研 、 数 据 为 基础 ， 结 合 产品 定位 和 运营 策略 来 共 建 设计 目标 ， 把 抽象 的 目标 转化 为 实 
际 、 专 业 、 纺 密 的 设计 方案 ， 最 后 对 设计 进行 验证 并 优化 和 迭代 。 从 每 一 次 量 的 积累 ， 到 方法 体系 的 构建 ， 再 到 编辑 成 这 本 关于 互 
联网 商业 化 设计 的 书籍 ， 这 也 算是 质 的 《 跃 了 。 通 过 本 书 ， 我 们 希望 能 够 帮助 大 家 在 设计 的 道路 上 局 及 思 路 ， 友 挥 更 大 的 价值 ， 
为 产品 的 商业 化 ， 为 提升 用 户 价值 和 商业 价值 ， 也 为 这 个 行业 的 进步 与 友 展 做 出 一 些 贡 献 。 这 也 是 《设计 力 》 一 书 的 写作 初 袁 和 
目的 。 


本 书 的 诞生 ， 是 集体 智慧 的 结晶 ， 但 并 不 代表 我 们 设计 团队 到 达 一 个 多 高 的 高 度 ， 而 是 代表 我 们 刚刚 起 步 上 路 。 这 是 一 条 创 
新 之 路 ， 也 是 一 条 传承 之 路 。 设 计 是 需要 创新 的 ， 但 是 追求 设计 更 专业 、 综 合 能 力 更 全 面 的 境界 是 要 传承 的 。 路 漫漫 其 修 远 今 
ЕН Е ГПК. 
马 志 娟 
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1.1 迅雷 体验 设计 方法 体系 EDM3S 概 述 


1.1.1 EDMS 简 介 


EDMS (Experience Design Method System) 是 迅雷 对 一 些 项 目的 成 功 实战 经 验 进 行 总 结 后 建 出 的 一 套 行 之 有 效 的 整体 
化 设计 思路 。EDMS 以 调研 、 数 据 为 基础 ， 以 定性 、 定 量 的 用 户 调研 ， 以 及 制作 体验 地 图 、 竞 品 分 析 等 方法 为 前 期 准备 ， 与 产品 
定位 、 运 曹 策略 、 项 目 一 起 共 建 设计 目标 ; 再 以 目标 为 导向 ， 把 抽象 的 目标 转化 为 实际 、 专 业 、 纺 密 的 设计 方案 ; 最 后 通过 
GPK、 体 验 维度 进行 设计 验证 及 优化 迭代 。 


EDMS 涵 盖 体验 要 素 的 战略 层 、 范 围 层 、 结 构 层 、 框 架 层 、 表 现 层 。EDMS 将 体验 设计 的 这 五 个 层级 从 抽象 到 具体 实践 逐步 
展现 。 图 1-1 所 示 为 EDMS 完 成 的 内 容 。 下 面 我 们 将 按 图 中 所 示 四 个 部 分 进行 讲解 。 


1.1.2 设计 准备 

过 到 一 个 设计 任务 时 ， 我 们 需要 做 一 些 准备 工作 。 例 如 任务 是 设计 一 个 “母亲 节 购 买 会 员 折扣 ”的 活动 页 面 ， 首 先 要 评估 这 
个 活动 面向 的 用 户 群 体 、 用 户 数 ， 如 果 用 户 群 体 男生 占 比较 大 ， 那 我 们 的 设计 可 以 尽量 偏向 男性 风格 ， 让 用 户 第 一 次 看 到 就 能 感 
党 舒适 ， 从 而 有 效 降 低 蹦 失 率 (Bounce Rate， 又 可 译 为 跳 失 率 ， 是 指 用 户 浏 览 第 一 个 页 面 就 离开 的 访问 次 数 占 该 入 口 总 访问 次 


数 的 比例 ) 。 下 面 我 们 来 看 看 EDMS 体 系 中 设计 准备 具体 需要 收集 哪些 数据 ， 以 及 这 些 数 据 对 我 们 的 帮助 体现 在 哪些 地 方 。 
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图 1-1 EDMS 体 验 设 计 方 法 体系 
EDMS 体 系 中 ， 我 们 将 设计 准备 分 为 四 个 部 分 。 
1. 用 户 类 型 


用 户 是 从 事 什么 行业 的 ， 他 的 属性 是 什么 ， 属 于 一 个 什么 样 的 群体 。 分 析 用 户 类 型 有 利于 我 们 针对 用 尸 进行 有 效 设 计 ， 更 容 
易 打 动用 户 的 心 。 这 里 所 说 的 设计 包括 一 些 文案 、 界 面 ， 甚 至 大 型 的 活动 等 。 例 如 ， 我 们 分 析 得 知 一 批 用 户 比 较 年 轻 而 且 爱 运 
动 ， 那 么 我 们 束 可 以 把 文案 、 内 容 、 界 面 的 风格 设计 得 偏向 年 轻 化 和 运动 化 ， 甚 至 还 可 以 植 入 运动 品牌 信息 ， 这 样 用 己 不 仪 不 会 
反感 ， 还 会 完 得 我 们 的 产品 更 懂 他 ， 给 他 市 来 了 有 用 信息 和 价值 。 用 户 类 型 如 图 1-2 所 示 。 


2. 后 台数 据 收 集 


后 台数 据 可 反映 用 尸 访 问 页 面 的 深度 ， 包 括 点 击 各 个 标签 、 链 接 或 按钮 的 次 数 ， 以 及 跳出 率 、 踢 失 率 、 视 完 热 点 等 。 后 台数 
据 收集 有 利于 改善 我 们 的 设计 体验 和 评估 我 们 的 内 容 吸 引力 。 例 如 ， 这 个 页 面 的 蹦 失 率 很 高 ， 那 证 明 我 们 的 内 容 不 是 用 户 想 要 
的 ; 再 例如 ， 我 们 要 做 一 个 提高 注册 用 户 数 的 活动 ， 通 过 后 台 记 录用 户 访问 路 径 和 视觉 焦点 图 ， 发 现 注册 按钮 点 击 率 相当 低 ， 原 
因 是 我 们 的 注册 按钮 设计 得 太 不 显眼 了 ， 吻 导致 用 户 找 不 到 我 们 的 注册 按钮 。 
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ЗАЗ 


宪 交 媒体 反馈 指 用 户 在 社交 平台 上 提交 的 关于 我 们 业务 的 投诉 、 问 题 、 使 用 情况 、 分 享 频次 、 使 用 感受 等 信息 。 社 区 媒体 的 
反馈 能 让 我 们 更 接近 用 户 心 中 的 想法 ， 并 能 及 现 更 多 用 户 问 题 ， 从 而 解决 用 户 问 题 。 例 如 我 们 有 一 些 产品 的 反馈 渠道 ， 如 论坛 、 
微 博 等 ， 我 们 在 上 面 可 以 看 到 用 尸 对 我 们 产品 的 印象 、 功 能 使 用 情况 、 建 议 等 。 例 如 在 微 信 朋友 圈 ， 我 们 可 以 看 到 一 些 H5 活 动 
转载 次 数 ， 以 此 来 评估 我 们 做 的 这 个 活动 的 吸引 力 和 分 享 情况 。 社 区 媒体 反馈 如 图 1-3 所 示 。 


查看 : 820 | 回复 : 3 [建议 提案 ] 关于 新 版 Mac 版 迅 别 UI 界面 的 一 些 建 议 [жш 


Hi team, 


一 直 都 是 迅雷 的 会 员 ， 一 直 都 在 用 你 们 的 软件 下 载 ， 废 话 不 多 说 了 ， 想 提 几 个 建议 : 


1 主 界面 显示 是 炫 了 ， 但 是 实际 体验 并 不 好 。 每 一 条 下 载 的 条 目 过 宽 ， 条 目 与 条 目 之 间 也 过 宽 ， 一 眼 望 去 还 以 为 这 是 ipad 软 件 
的 界面 ， 即 使 是 foripad， 条 目 和 条 目的 间距 过 宽 了 。 

2. 建议 去 掉 下 载 页 面 全 部 的 空 日 ， 并 且 删 除 条 目的 格式 图 片 ，Downie 的 界面 基本 是 标杆 ， 歼 率 和 美观 齐 平 。 

3. 感觉 你 们 现在 这 个 页 面 之 所 以 设计 的 那么 空白 是 因为 要 预 留 空间 给 会 员 页 显示 ， 但 是 我 相信 你 们 一 定 能 找到 一 个 更 好 的 车 代 
万 案 的 ~ 加 油 


图 1-3 ”社交 媒体 反馈 


4. 效 果 


效果 是 验证 我 们 方案 的 一 个 重要 因素 ， 也 能 为 我 们 下 一 次 方案 提供 很 好 的 参考 价值 。 例 如 我 们 和 有 某 电 商 进行 了 一 次 “开通 迅 
雷 会 员 送 商城 购物 券 ” 的 合作 活动 ， 通 过 活动 ， 我 们 评估 出 该 电 商 所 实现 的 品牌 效应 、 活 动 污水 和 新 增 的 购物 用 户 等 ， 这 些 数据 
能 很 好 地 应 用 在 和 其 他 平台 合作 的 活动 中 ， 我 们 能 更 直观 地 预 判 出 活动 所 市 来 的 影响 和 价值 ， 从 而 有 针对 性 地 给 方案 做 优化 和 提 
升 。 效 果 验 证 如 图 1-4 所 示 。 


春节 洁 动 及 3 月 德 牌 洁 动 ,拉动 Q1 大 盘 收 入 一 Q1 流 水 
春节 活动 上 线 3 月 翻 牌 活动 上 线 
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图 1-4 效果 验证 


小 结 : 设计 准备 是 为 了 让 我 们 能 友 现 问题 ， 局 友 设 计 思 路 ， 判 断 和 验证 设计 方案 。 


1.1.3 ”设计 目标 


设计 目标 是 我 们 设计 方案 所 要 达到 的 目的 和 效果 ， 也 是 做 设计 方案 的 方向 和 依据 。 


该 如 何 来 定义 设计 目标 呢 ” 我 们 在 做 任何 业务 的 时 候 ， 都 会 有 一 个 业务 目标 ， 例 如 迅雷 客户 端 新 版 本 的 业务 目标 是 日 活跃 用 
尸 达到 干 万 级 。 业 务 目 标 通 党 是 为 了 提升 某 些 指标 ， 比 如 营 收 和 用 户 数 ， 而 设计 部 门 还 需要 承担 改善 用 尸体 验 的 责任 ， 所 以 我 们 
也 要 考虑 如 何在 不 伤害 用 尸体 验 的 前 提 下 达成 业务 目标 。 上 面 我 们 已 经 介绍 了 数据 收集 方法 ， 通 过 数据 收集 和 分 析 我 们 很 容易 区 
能 得 到 用 户 在 使 用 我 们 产品 时 的 目标 ， 例 如 ， 用 户 使 用 迅雷 客户 端的 一 个 目标 是 希望 下 载 速 度 更 快 。 用 户 目标 出 来 后 结合 业务 目 
标 ， 即 可 定义 出 设计 目标 ， 同 时 需要 考虑 平衡 用 尸体 验 和 商业 价值 。 本 书后 面 会 用 更 多 实战 案例 来 审 大 家 一 起 学 习 这 部 分 内 容 。 
设计 目标 如 图 1-5 所 示 。 


三 
3 
2. 下载 速度 更 快 


5 А: 
1. 迅雷 客 尸 并 DAU 一 年 达到 于 万 级 别 


2 .付费 用 户 提 升 50%， 营 收 提 升 100% 3 操作 界面 美观 易 用 


设计 目标 : 

1. 界面 呈现 满足 用 户 快 速 找 到 资源 进行 下 载 的 需求 
2. 让 用 尸 感 受 加 速 体验 ， 提升 付费 率 

3. 界面 美观 ， 操 作 更 顺畅 


91-5 ”迅雷 客户 端 改 版 项 目 设计 目标 


1.1.4 设计 方案 


有 了 目标 后 ， 接 下 来 我 们 要 做 的 是 设计 方案 ， 在 之 前 的 基础 上 , 方向 已 经 非常 明确 了 。 人 在 迅雷 的 设计 组 织 染 构 中 ， 我 们 是 标 
准 的 UED 配 比 ， 分 为 交互 、 视 完 、 重 构 3 个 专业 岗位 。 在 完成 设计 目标 的 过 程 中 ， 三 个 专业 人 员 进 行 沟 通 是 非常 频繁 的 ， 我 们 及 
用 的 不 是 流水 式 的 工作 方式 ， 而 是 前 期 我 们 会 一 起 来 讨论 如 何 去 完 成 设计 目标 ， 同 时 需要 关注 效 率 成 本 ， 还 要 考虑 产品 的 扩展 
性 ， 为 以 后 版 本 运 代 和 优化 铺 好 路 。 设 计 方 案 如 图 1-6 所 示 。 

从 交互 到 视 党 再 到 重 构 ， 三 个 环 证 是 崇 密 相 扣 的 ， 图 1-7 为 我 们 的 设计 流程 图 。 


这 里 不 再 讲解 详细 的 方案 ， 本 书后 面 很 多 案例 都 会 结合 EDMS 来 讲解 方案 。 再 次 强调 ， 设 计 方 案 不 可 以 与 设计 目标 偏离 。 


01 
Interaction 


1. 不 可 与 设计 目标 偏离 |; 
2. 关注 效 鞭 和 成 本 ; 
3. 考虑 扩展 性 ， 为 版 本 过 代销 路 


图 1-6 ”设计 方案 


设计 总 结 、 和 迭代 优化 项 目 跟 进 | 
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91-7 设计 流程 


1.1.5 ”设计 验证 


我 们 完成 一 个 设计 方案 并 上 线 后 ， 需 要 验证 这 个 方案 是 人 否 很 好 地 达成 我 们 的 设计 目标 ， 是 否 对 业务 目标 的 提升 有 很 大 的 帮助 
作用 。 我 们 做 了 一 个 比较 完善 的 用 尸体 验 维度 量化 体系 ,这 个 用 尸体 验 维度 量化 体系 是 由 GPK 指 标 体 系 和 体验 维度 构成 的 。 


1.GPK 指 标 体系 


GPK 指 标 体系 用 于 定义 要 完成 设计 目标 需要 做 的 具体 事情 ， 并 通过 这 些 事情 来 进一步 衡量 我 们 的 设计 目标 是 否 达成 。 由 总 目 


标 (Goal) 、 表 现 (Performance) 、 设 计 目 标 (Design Object) 、 关 键 事 件 (Key Results) 四 个 部 分 构成 。 

` 总 目标 (С) : 即 完成 这 个 设计 最 终 要 达到 的 业务 目标 。 

ЖЭ, (P) : 完成 总 目标 的 过 程 中 ， 用 户主 要 用 哪些 表现 来 承载 这 个 目标 。 

:设计 目标 (DO) : 由 业务 目标 + 用 户 目标 综合 设立 设计 目标 。 

` 关键 事件 (KR) : 完成 设计 目标 具体 所 要 做 的 事情 。 
我 们 举 一 个 生活 中 的 通俗 易 懂 的 例子 来 解析 GPK 体 系 。 

А: 提升 快餐 餐厅 的 中 午 营 业 流水 。 

ЖЯ: 更 多 顾客 过 来 吃饭 ; 顾客 的 消费 金额 比 以 前 多 。 


` 设计 目标 : 提升 就 餐 人 数 ; 提升 人 均 消 费 


` 关键 事件 : 设计 新 的 菜 式 吸引 更 多 顾客 ; 设计 组 合 消费 套餐 模式 ， 让 顾客 加 钱 选 择 套餐 消费 。 


从 上 面 的 例子 我 们 能 很 好 理解 GPK， 图 1-8 所 示 为 一 个 互联 网 产品 例子 ， 可 用 来 前 述 互 联网 产品 的 GPK 体 系 。 


S ВітСоаі 表现 Performance ”| 设计 目标 Design Object > 关键 事件 Key Results 


提升 迅雷 会 员 1. 希望 能 快速 下 载 到 宽 源 DO 构建 有 效 付费 场景 提升 按钮 开通 率 
开通 率 20% 2. 快速 付费 开通 会 员 KR1. 重 新 优化 下 载 工 具 条 ， 增 加 注册 用 户 试 用 机 制 


3. 体验 到 更 多 的 会 员 福 利 KR2. 优 化 界面 加 速效 果 ， 加 速 体验 更 舒适 


DO. 优 化 支付 流程 交互 ， 提 升 支付 成 功率 
KR1. 支 付 逻 辑 优化 
KR2. 支 付 流程 优化 


注释 : OKR 全 称 是 Objectives and Key Results, 即 目标 与 关键 成 果 法 . 


图 1-8 GPK 指标 体系 


2. 体 验 维度 


有 了 GPK 指 标 体系 之 后 ， 残 知道 要 完成 设计 目标 具体 要 做 哪些 事情 ， 但 是 这 样 是 不 够 的 ， 因 为 做 了 这 些 事 情 后 ， 我 们 还 要 一 
个 维度 去 衡量 我 们 做 的 这 些 事情 有 没有 满足 用 尸体 验 的 要 求 。 我 们 在 做 互联 网 产品 的 时 候 ， 用 户 的 体验 永远 都 是 放 在 首位 的 ， 创 
立 结 合 GPK 体 系 的 体验 五 维度 ， 可 以 来 衡量 我 们 做 的 设计 是 否 足够 满足 用 尸体 验 要 求 。 设 计 验 证 -用 尸体 验 维度 量化 如 图 1-9 所 


То 


91-9 ”设计 验证 一 用 户 体验 维度 量化 


我 们 在 做 一 个 互联 网 产品 的 过 程 中 ， 主 要 是 做 用 户 的 新 增 和 留 仓 ， 这 个 是 一 定 的。 体验 维度 是 在 做 用 户 新 增 到 用 户 留 存 这 个 
过 程 中 定义 的 。 从 图 1-9 所 示 我 们 可 以 看 出 ,体验 的 维度 分 为 有 用 性 、 完 成 率 、 满 意 率 、 依 赖 性 、 推 荐 率 。 结 合 这 五 个 维度 ， 用 
尸 对 应 的 表现 是 第 一 屏 感 受 、 主 观感 受 、 口 碑 传 播 。 用 己 对 应 的 行为 是 操作 体验 和 再 次 访问 。 


第 一 屏 感 受 (和 有 用 性 ) : 新 用 尸 进入 产品 的 首次 感受 ， 包括 内 容 和 界面 ， 这 里 考量 的 指标 大 概 有 踢 失 率 、 点 击 率 、 跳 出 率 、 
用 尸 评价 等 ， 不 同 产 品 的 考量 指标 也 不 一 样 。 例 如 ， 如 果 用 户 第 一 次 进入 你 的 产品 ， 马 上 束 天 闭 了 ， 证 明 你 的 产品 没有 提供 给 他 


想 要 的 内 容 又 或 者 界面 设计 让 他 非 单 芭 感 ， 导 致 他 一 进去 残 天 财 页 面 ， 那 么 这 个 蹦 失 率 残 会 非 音 局。 此 时 融 可 认为 这 个 产品 的 第 
БЕЗ ЗЕЙ, 


操作 体验 〈 完 成 率 ) : 用 尸 在 进入 你 的 产品 后 ， 是 否 能 够 完成 他 想 要 的 目标 ， 在 完成 这 个 目标 的 过 程 中 ， 效 率 是 否 高 ， 他 是 
否 感 总 操作 足够 便捷 ， 这 个 融 是 我 们 所 襄 的 操作 体验 。 我 们 用 完成 率 作 为 评价 操作 体验 的 指标 。 例 如 ， 用 户 购 买 迅雷 会 员 ， 他 从 
购买 到 完成 支付 的 过 程 中 是 否 有 阻碍 ， 如 果 有 很 多 未 完成 支付 ， 或 者 在 支付 过 程 中 放弃 ， 那 么 就 要 仔细 检讨 操作 体验 了 。 细 分 考 
量 指 标 ， 细 分 后 包括 用 户 到 达 率 、 用 户 操 作 步 骤 、 用 户 退 出 率 等 。 操 作 体 验 如 图 1-10 所 示 。 


主观 感受 (满意 率 ) :主观 感受 ， 即 用 户 在 使 用 完 产 品 后 ， 给 他 带 来 的 视觉 感受 、 操 作 体 验 、 内 容 价值 、 功 能 价 信 。 这 个 比 
较 好 理解 ， 细 分 后 考量 指标 有 整体 满意 度 、 学 习性 主观 评分 、 理 解 性 主观 评分 、 美 观 性 主观 评分 。 主 观感 受 如 图 1-11 所 示 。 


点 击 图 名 称 : 快 鸟 -页 面 点 击 图 统计 范 


图 1-10 ”操作 体验 
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图 1-11 用 户主 观感 受 


再 次 访问 (依赖 性 ) : 再 次 访问 是 用 户 在 使 用 产品 后 ， 第 二 次 及 以 上 的 访问 。 这 个 指标 非常 重要 ， 这 里 我 们 用 依赖 性 来 作为 
考量 指标 ， 即 用 户 对 产品 是 否 产 生 依赖 。 例 如 短信 ， 每 天 都 有 很 多 用 尸 要 打开 好 几 次 ,证 明 这 款 产 品 是 非常 有 价值 的 ， 用 户 已 经 
离 不 开 这 到 产品 了 。 如 果 用 户 人 在 使 用 你 的 产品 后 ， 大 部 分 人 都 不 再 来 了 ， 那 证 明 你 的 产品 是 不 能 给 用 户 审 来 有 用 的 价值 的 。 这 里 
我 们 细 分 衡量 它 的 指标 ， 细 分 后 有 回访 次 数 、 人 均 PV 量 等 


口碑 传播 (推荐 率 ) : 口碑 传播 束 是 用 户 在 使 用 你 的 产品 后 ， 主 动 和 他 人 分 享 ， 告 诉 他 人 这 个 产品 非常 好 用 ， 推 荐 他 人 都 来 


使 用 ;或 者 因 超 出 用 户 预 期 ， 用 己 很 兴 香 并 且 目 聂 地 人 在 朋友 圈 分 享 这 个 产品 ， 如 图 1-12 所 示 。 例 如 比较 火 的 POKEMONE GO 洲 
戏 束 引 爆 了 朋友 圈 。 这 里 细 分 衡量 它 的 主要 指标 ， 细 分 后 有 社交 口碑 传播 次 数 。 口 碑 传 播 示例 。 


«> 
证 类 还 插 好 看 的 哈哈 哈 ， 有 时 
不 再 像 以 前 那么 低俗 了 ， 还 
一 直 用 的 下 载 工具 会 越 做 越 


图 1-12 ”口碑 传播 《图 片 来 自 朋 友 较 截图 ) 


以 上 就是 体验 的 五 个 维度 ， 这 里 要 注意 的 是 ， 每 个 产品 的 体验 细 分 衡量 指标 都 不 一 样 ， 例 如 功能 性 的 产品 ， 更 多 是 看 操作 完 
成 率 ， 运 言 类 的 产品 更 多 是 看 用 户 转化 所 标 。 


3. 用 尸体 验 量化 维度 归纳 


我 们 结合 GPK 指 标 加 体验 维度 最 终 做 成 完全 量化 用 尸体 验 标准 的 表格 ( 见 图 1-13) ,该 表 非 常 系统 地 体现 了 用 尸体 验 量化 
维度 。 该 表 从 完成 五 维度 ， 到 细 分 用 户 的 具体 表现 ， 定 义 了 我 们 的 设计 目标 ， 及 最 后 要 完成 这 个 设计 目标 应 做 的 关键 设计 ， 以 此 
作为 设计 师 的 考核 标准 和 设计 方案 的 考核 标准 是 非常 有 用 的 。 该 表 并 没有 包括 所 有 不 同类 型 的 设计 指标 ， 只 是 一 个 示意 例子 ,不 
同 产 品 的 指标 是 不 一 样 的 。 例 如 ， 如 果 要 做 创新 设计 的 方案 ， 那么 该 表 束 不 太 适 用 了 ， 它 适用 于 常规 并 且 较 为 成 熟 的 产品 。 


有 了 这 一 套 体系 ， 可 以 很 直观 地 评价 设计 方案 到 底 哪 里 做 得 好 ， 哪 些 地 方 做 得 不 足 。 但 也 不 要 筷 记 ， 优 秀 的 设计 师 要 时 刻 保 
持 一 种 创新 的 心态 去 对 竺 产品 ， 那 样 才 能 走 得 更 远 。 


АЈА, 


通过 用 户 体 验 量化 验证 了 我 们 设计 方案 的 成 果 ， 在 此 过 程 中 一 定 会 友 现 很 多 问题 ， 故 需要 通过 收集 问题 ， 快 速 和 迭代 来 解决 我 
们 在 验证 过 程 中 出 现 的 问题 。 本 书后 面 的 章节 会 根据 EDM3 体 系 为 大 家 介绍 更 多 实战 案例 。 


目标 Goal 表现 Performance 设计 目标 Design Object 关键 事件 Key Results 


找到 感 兴趣 内 容 用 户 跳 出 率 低 
用 户 点 击 效 率 高 用 户 点 击 转 化 率 高 具体 设计 方案 
更 多 用 户 点 击 用 户 蹦 失 率 低 


更 多 用 户 使 用 目标 任务 
更 多 用 户 完 成 目标 任务 
用 户 更 快 完成 目标 任务 
操作 出 错 少 


用 户 到 达 率 高 用 户 操作 完成 时 间 短 
用 户 作 操作 步骤 少 用 户 退 出 率 低 具体 设计 方案 
用 户 操作 出 错 率 低 


学 习性 ， 理 解 性 
美观 感 等 主观 感受 
满意 度 高 


整体 满意 度 高 ”学 习性 主观 评分 高 


шы 
理解 性 主观 评分 高 ”美感 主观 评分 高 具体 设计 方案 


waw 经 常 访问 网 站 7 天 /30 天 /90 天 用 户 回访 率 高 
有 次 访问 查看 和 使 用 更 多 功能 人 均 PV 量 高 具体 设计 方案 


主动 分 享 和 向 他 人 推荐 £ 具体 设计 方案 


图 1-13 设计 验证 - 用户 体验 维度 量化 
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ГЕУ] ни 
EDMS 是 一 套 设计 方法 和 归纳 体系 ， 能 够 很 清晰 地 指引 设计 师 完 成 目标 ， 更 能 从 用 户 角度 出 上 来 考虑 用 户 体 验 和 商业 价值 的 
平衡 ， 从 而 提升 产品 体验 和 两 业 利益 ， 给 业务 市 来 价值 。 怎 么 才能 快速 掌握 这 人 套 体 系 呢 ? 关键 还 是 要 多 了 解 公 司 业 务 ， 多 与 需求 


方 沟通 ， 记 录 下 他 们 的 需求 和 问题 ， 多 多 主动 探索 和 思考 设计 的 价值 ， 做 好 设计 准备 ， 因 为 这 些 都 是 制定 设计 目标 、 做 好 设计 方 
案 的 依据 。 这 套 体系 的 精髓 残 是 : 用 数据 来 驱动 设计 方案 。 


第 1 章 ”体验 设计 方法 体系 EDM3S 王 实战 案例 


1.1 迅雷 体验 设计 方法 体系 EDM3 概 述 


1.1.1 EDMS9 简 介 


EDMS (Experience Design Method System) 是 迅雷 对 一 些 项 目的 成 功 实战 经 验 进 行 总 结 后 建 出 的 一 套 行 之 有 效 的 整体 
化 设计 思路 。EDMS 以 调研 、 数 据 为 基础 ， 以 定性 、 定 量 的 用 户 调研 ， 以 及 制作 体验 地 图 、 竞 品 分 析 等 方法 为 前 期 准备 ， 与 产品 
定位 、 运 营 策 略 、 项 目 一 起 共 建 设计 目标 ; 再 以 目标 为 导向 ,把 抽象 的 目标 转化 为 实际 、 专 业 、 续 密 的 设计 方案 ; 最 后 通过 
GPK、 体 验 维度 进行 设计 验证 及 优化 迭代 。 


EDMS 涵 苹 体 验 要 素 的 战略 层 、 范 围 层 、 结 构 层 、 框 架 层 、 表 现 层 。EDMS 将 体验 设计 的 这 五 个 层级 从 抽象 到 具体 实践 逐步 
展现 。 图 1-1 所 示 为 EDMS 完 成 的 内 容 。 下 面 我 们 将 按 图 中 所 示 四 个 部 分 进行 讲解 。 


1.1.2 设计 准备 


妆 到 一 个 设计 任务 时 ， 我 们 需要 做 一 些 准备 工作 。 例 如 任务 是 设计 一 个 “母亲 节 购 买 会 员 折 扣 ” 的 活动 页 面 ， 首 先 要 评估 这 
个 活动 面向 的 用 户 群体 、 用 户 数 ， 如 果 用 户 群体 男生 占 比 较 大 ， 那 我 们 的 设计 可 以 尽量 偏向 男性 风格 ， 让 用 户 第 一 次 看 到 就 能 感 
帝 舒 适 ， 从 而 有 效 降低 员 失 率 (Bounce Rate， 又 可 译 为 跳 失 率 ， 是 指 用 户 浏 览 第 一 个 页 面 束 离开 的 访问 次 数 占 该 入 口 忌 访问 次 
数 的 比例 ) 。 下 面 我 们 来 看 看 EDMS 体 系 中 设计 准备 具体 需要 收集 哪些 数据 ， 以 及 这 些 数 据 对 我 们 的 帮助 体现 在 哪些 地 方 。 
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一 @ 用 户 类 型 一。 行业 
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设计 方案 1—2 (ES 视觉 


—9 重 构 


用 户 体 验 维 人 @GPK 指标 体系 
度量 化 K = 体验 维度 


迭代 优化 方案 


—® 迭代 优化 
图 1-1 EDMS 体 验 设 计 方 法 体系 
EDMS 体 系 中 ， 我 们 将 设计 准备 分 为 四 个 部 分 。 


1. 用 尸 类 型 


用 户 是 从 事 什么 行业 的 ， 他 的 属性 是 什么 ， 属 于 一 个 什么 样 的 群体 。 分 析 用 户 类 型 有 利于 我 们 针对 用 尸 进行 有 效 设 计 ， 更 容 
易 打 动用 户 的 心 。 这 里 所 说 的 设计 包括 一 些 文案 、 界 面 ， 甚 至 大 型 的 活动 等 。 例 如 ， 我 们 分 析 得 知 一 批 用 户 比 较 年 轻 而 且 爱 运 
动 ， 那 么 我 们 束 可 以 把 文案 、 内 容 、 界 面 的 风格 设计 得 偏向 年 轻 化 和 运动 化 ， 甚 至 还 可 以 植 入 运动 品牌 信息 ， 这 样 用 己 不 仪 不 会 
反感 ， 还 会 完 得 我 们 的 产品 更 懂 他 ， 给 他 市 来 了 有 用 信息 和 价值 。 用 户 类 型 如 图 1-2 所 示 。 


2. 后 台数 据 收 集 


后 台数 据 可 反映 用 尸 访问 页 面 的 深度 ， 包 括 点 击 各 个 标签 、 链 接 或 按钮 的 次 数 ， 以 及 跳出 率 、 踢 失 率 、 视 党 热点 等 。 后 台数 
据 收 集 有 利于 改善 我 们 的 设计 体验 和 评估 我 们 的 内 容 吸 引力 。 例 如 ， 这 个 页 面 的 踢 失 率 很 高 ， 那 证 明 我 们 的 内 容 不 是 用 户 想 要 
的 ; 再 例如 ， 我 们 要 做 一 个 提高 注册 用 户 数 的 活动 ， 通 过 后 人 台 记 录用 户 访问 路 径 和 视觉 焦点 图 ， 发 现 注册 按钮 点 击 率 相当 低 ， 原 
因 是 我 们 的 注册 按钮 设计 得 大 不 显眼 了 ， 吻 导致 用 户 找 不 到 我 们 的 注册 按钮 。 


平均 使 用 时 长 


ш 每 次 少 于 15 分 钟 
每 次 15 分 钟 一 30 分 钟 
每 次 1 一 2 小 时 

每 次 2 一 3/ 小 时 

每 次 3 一 4 小 时 

每 次 4 小 时 以 上 


ш 不 足 1 个 月 

= 1 一 3 个 月 ( 舍 3 个 月 ) 
ш 3 一 6 个 月 〈 含 6 个 月 ) 
ш 6 个 月 一 1 年 ( 含 1 年 ) 
m 1 人 2 年 (人 言 2 年 ) 

Ш 3—5 年 ( 含 5 年 ) 

Ш 5 年 以 上 


а 非 付费 用 户 


图 1-2 用户 类 型 


3. 社 交 媒 体 反馈 


社交 媒体 反馈 指 用 尸 在 社交 平台 上 提交 的 关于 我 们 业务 的 投诉 、 问 题 、 使 用 情况 、 分 享 频次 、 使 用 感受 等 信息 。 社 交 媒 体 的 
反馈 能 让 我 们 更 接近 用 户 心 中 的 想法 ， 并 能 及 现 更 多 用 户 问 题 ， 从 而 解决 用 户 问 题 。 例 如 我 们 有 一 些 产品 的 反馈 渠道 ， 如 论坛 、 
微 博 等 ， 我 们 在 上 面 可 以 看 到 用 户 对 我 们 产品 的 印象 、 功 能 使 用 情况 、 建 议 等 。 例 如 在 微 信 朋 友 圈 ， 我 们 可 以 看 到 一 些 H5 活 动 
转载 次 数 ， 以 此 来 评估 我 们 做 的 这 个 活动 的 吸引 力 和 分 享 情况 。 社 交 媒 体 反馈 如 图 1-3 所 示 。 


ве: 820 | 回复 : 3 [建议 提案 ] 关于 新 版 Mac 版 迅雷 UI 界面 的 一 些 建议 [复制 链接 ] 


Hi team, 


一 直 都 是 迅雷 的 会 员 ， 一 直 都 在 用 你 们 的 软件 下 载 ， 废 话 不 多 说 了 ， 想 提 几 个 建议 : 


1 主 界面 显示 是 炫 了 ， 但 是 实际 体验 并 不 好 。 每 一 条 下 载 的 条 目 过 宽 ， 条 目 与 条 目 之 间 也 过 宽 ， 一 有 眼 望 去 还 以 为 这 是 iPad 软 件 


的 界面 ， 即 使 是 for ipad， 条 目 和 条 目的 间距 过 完了 。 
2. ap s 白 ， 并 且 删 除 条 目的 格式 图 片 ， Downie 的 界面 基本 是 标 ‚ 效率 和 美观 齐 平 。 
感觉 你 们 现在 这 个 页 面 之 所 以 设计 的 那么 空白 是 因为 要 预 留 空间 给 会 员 页 显示 ， 但 是 我 相信 你 们 一 定 能 找到 一 个 更 好 的 车 代 


"esse 加 油 


91-3 ”社交 媒体 反馈 


4. 效 果 
效果 是 验证 我 们 方案 的 一 个 重要 因素 ， 也 能 为 我 们 下 一 次 方案 提供 很 好 的 参考 价值 。 例 如 我 们 和 某 电 商 进行 了 一 次 “开通 迅 
雷 会 员 尖 商城 购物 券 ” 的 合作 活动 ， 通 过 活动 ， 我 们 评估 出 该 电 商 所 实现 的 品牌 效应 、 活 动 法 水 和 新 增 的 购物 用 户 等 ， 这 些 数据 
能 很 好 地 应 用 在 和 其 他 平台 合作 的 活动 中 ， 我 们 能 更 直观 地 预 判 出 活动 所 市 来 的 影响 和 价值 ， 从 而 有 针对 性 地 给 方案 做 优化 和 提 
升 。 效 果 验 证 如 图 1-4 所 示 。 


春节 洁 动 及 3 月 德 牌 洁 动 ,拉动 Q1 大 盘 收 入 一 Q1 流 水 
春节 活动 上 线 3 月 翻 牌 活动 上 线 


(Л, 
.< аи ЕА 
. 


007 Е8К18% , ХаК Е 510% 一 年 费 占 比 


et 
开发 日 活动 上 线 Казак 


一 KW N 


图 1-4 效果 验证 


小 结 : 设计 准备 是 为 了 让 我 们 能 友 现 问题 ， 局 友 设 计 思 路 ， 判 断 和 验证 设计 方案 。 


1.1.3 ”设计 目标 


设计 目标 是 我 们 设计 方案 所 要 达到 的 目的 和 效果 ， 也 是 做 设计 方案 的 方向 和 依据 。 


该 如 何 来 定义 设计 目标 呢 ” 我 们 在 做 任何 业务 的 时 候 ， 都 会 有 一 个 业务 目标 ， 例 如 迅雷 客户 端 新 版 本 的 业务 目标 是 日 活跃 用 
尸 达到 干 万 级 。 业 务 目 标 通 党 是 为 了 提升 某 些 指标 ， 比 如 营 收 和 用 户 数 ， 而 设计 部 门 还 需要 承担 改善 用 尸体 验 的 责任 ， 所 以 我 们 
也 要 考虑 如 何在 不 伤害 用 尸体 验 的 前 提 下 达成 业务 目标 。 上 面 我 们 已 经 介绍 了 数据 收集 方法 ， 通 过 数据 收集 和 分 析 我 们 很 容易 区 
能 得 到 用 户 在 使 用 我 们 产品 时 的 目标 ， 例 如 ， 用 户 使 用 迅雷 客户 端的 一 个 目标 是 希望 下 载 速 度 更 快 。 用 户 目标 出 来 后 结合 业务 目 
标 ， 即 可 定义 出 设计 目标 ， 同 时 需要 考虑 平衡 用 尸体 验 和 商业 价值 。 本 书后 面 会 用 更 多 实战 案例 来 审 大 家 一 起 学 习 这 部 分 内 容 。 
设计 目标 如 图 1-5 所 示 。 


三 
3 
2. 下载 速度 更 快 


5 А: 
1. 迅雷 客 尸 并 DAU 一 年 达到 于 万 级 别 


2 .付费 用 户 提 升 50%， 营 收 提 升 100% 3 操作 界面 美观 易 用 


设计 目标 : 

1. 界面 呈现 满足 用 户 快 速 找 到 资源 进行 下 载 的 需求 
2. 让 用 尸 感 受 加 速 体验 ， 提升 付费 率 

3. 界面 美观 ， 操 作 更 顺畅 
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1.1.4 设计 方案 


有 了 目标 后 ， 接 下 来 我 们 要 做 的 是 设计 方案 ， 在 之 前 的 基础 上 , 方向 已 经 非常 明确 了 。 人 在 迅雷 的 设计 组 织 染 构 中 ， 我 们 是 标 
准 的 UED 配 比 ， 分 为 交互 、 视 完 、 重 构 3 个 专业 岗位 。 在 完成 设计 目标 的 过 程 中 ， 三 个 专业 人 员 进 行 沟 通 是 非常 频繁 的 ， 我 们 及 
用 的 不 是 流水 式 的 工作 方式 ， 而 是 前 期 我 们 会 一 起 来 讨论 如 何 去 完 成 设计 目标 ， 同 时 需要 关注 效 率 成 本 ， 还 要 考虑 产品 的 扩展 
性 ， 为 以 后 版 本 运 代 和 优化 铺 好 路 。 设 计 方 案 如 图 1-6 所 示 。 

从 交互 到 视 党 再 到 重 构 ， 三 个 环 证 是 崇 密 相 扣 的 ， 图 1-7 为 我 们 的 设计 流程 图 。 


这 里 不 再 讲解 详细 的 方案 ， 本 书后 面 很 多 案例 都 会 结合 EDMS 来 讲解 方案 。 再 次 强调 ， 设 计 方 案 不 可 以 与 设计 目标 偏离 。 


01 
Interaction 


1. 不 可 与 设计 目标 偏离 |; 
2. 关注 效 鞭 和 成 本 ; 
3. 考虑 扩展 性 ， 为 版 本 过 代销 路 


图 1-6 ”设计 方案 
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1.1.5 ”设计 验证 


我 们 完成 一 个 设计 方案 并 上 线 后 ， 需 要 验证 这 个 方案 是 人 否 很 好 地 达成 我 们 的 设计 目标 ， 是 否 对 业务 目标 的 提升 有 很 大 的 帮助 
作用 。 我 们 做 了 一 个 比较 完善 的 用 尸体 验 维度 量化 体系 ,这 个 用 尸体 验 维度 量化 体系 是 由 GPK 指 标 体 系 和 体验 维度 构成 的 。 


1.GPK 指 标 体系 


GPK 指 标 体系 用 于 定义 要 完成 设计 目标 需要 做 的 具体 事情 ， 并 通过 这 些 事情 来 进一步 衡量 我 们 的 设计 目标 是 否 达成 。 由 总 目 


标 (Goal) 、 表 现 (Performance) 、 设 计 目 标 (Design Object) 、 关 键 事 件 (Key Results) 四 个 部 分 构成 。 

` 总 目标 (С) : 即 完成 这 个 设计 最 终 要 达到 的 业务 目标 。 

ЖЭ, (P) : 完成 总 目标 的 过 程 中 ， 用 户主 要 用 哪些 表现 来 承载 这 个 目标 。 

- 设计 目标 (DO) : 由 业务 目标 + 用 户 目 标 综合 设立 设计 目标 。 

` 关键 事件 (KR) : 完成 设计 目标 具体 所 要 做 的 事情 。 
我 们 举 一 个 生活 中 的 通俗 易 懂 的 例子 来 解析 GPK 体 系 。 

“ 总 目标 : 提升 快餐 餐厅 的 中 午 营 业 流 水 。 

ЖӘ: 更 多 顾客 过 来 吃饭 ; 顾客 的 消费 金额 比 以 前 多 。 


` 设计 目标 : 提升 就 餐 人 数 ; 提升 人 均 消 费 


` 关键 事件 : 设计 新 的 菜 式 吸引 更 多 顾客 ; 设计 组 合 消费 套餐 模式 ， 让 顾客 加 钱 选 择 套餐 消费 。 


从 上 面 的 例子 我 们 能 很 好 理解 GPK， 图 1-8 所 示 为 一 个 互联 网 产品 例子 ， 可 用 来 前 述 互 联网 产品 的 GPK 体 系 。 


S ВітСоаі 表现 Performance ”| 设计 目标 Design Object > 关键 事件 Key Results 


提升 迅雷 会 员 1. 希望 能 快速 下 载 到 宽 源 DO 构建 有 效 付费 场景 提升 按钮 开通 率 
开通 率 20% 2. 快速 付费 开通 会 员 KR1. 重 新 优化 下 载 工 具 条 ， 增 加 注册 用 户 试 用 机 制 


3. 体验 到 更 多 的 会 员 福 利 KR2. 优 化 界面 加 速效 果 ， 加 速 体验 更 舒适 


DO. 优 化 支付 流程 交互 ， 提 升 支付 成 功率 
KR1. 支 付 逻 辑 优化 
KR2. 支 付 流程 优化 


注释 : OKR 全 称 是 Objectives and Key Results, 即 目标 与 关键 成 果 法 . 


图 1-8 GPK 指标 体系 


2. 体 验 维度 


有 了 GPK 指 标 体系 之 后 ， 残 知道 要 完成 设计 目标 具体 要 做 哪些 事情 ， 但 是 这 样 是 不 够 的 ， 因 为 做 了 这 些 事 情 后 ， 我 们 还 要 一 
个 维度 去 衡量 我 们 做 的 这 些 事情 有 没有 满足 用 尸体 验 的 要 求 。 我 们 在 做 互联 网 产品 的 时 候 ， 用 户 的 体验 永远 都 是 放 在 首位 的 ， 创 
立 结 合 GPK 体 系 的 体验 五 维度 ， 可 以 来 衡量 我 们 做 的 设计 是 否 足够 满足 用 尸体 验 要 求 。 设 计 验 证 -用 尸体 验 维度 量化 如 图 1-9 所 


То 


91-9 ”设计 验证 一 用 户 体验 维度 量化 


我 们 在 做 一 个 互联 网 产品 的 过 程 中 ， 主 要 是 做 用 户 的 新 增 和 留 仓 ， 这 个 是 一 定 的。 体验 维度 是 在 做 用 户 新 增 到 用 户 留 存 这 个 
过 程 中 定义 的 。 从 图 1-9 所 示 我 们 可 以 看 出 ,体验 的 维度 分 为 有 用 性 、 完 成 率 、 满 意 率 、 依 赖 性 、 推 荐 率 。 结 合 这 五 个 维度 ， 用 
尸 对 应 的 表现 是 第 一 屏 感 受 、 主 观感 受 、 口 碑 传 播 。 用 己 对 应 的 行为 是 操作 体验 和 再 次 访问 。 


第 一 屏 感 受 (和 有 用 性 ) : 新 用 尸 进入 产品 的 首次 感受 ， 包括 内 容 和 界面 ， 这 里 考量 的 指标 大 概 有 踢 失 率 、 点 击 率 、 跳 出 率 、 
用 尸 评价 等 ， 不 同 产 品 的 考量 指标 也 不 一 样 。 例 如 ， 如 果 用 户 第 一 次 进入 你 的 产品 ， 马 上 束 天 闭 了 ， 证 明 你 的 产品 没有 提供 给 他 


想 要 的 内 容 又 或 者 界面 设计 让 他 非 单 芭 感 ， 导 致 他 一 进去 残 天 财 页 面 ， 那 么 这 个 蹦 失 率 残 会 非 音 局。 此 时 融 可 认为 这 个 产品 的 第 
БЕЗ ЗЕЙ, 


操作 体验 〈 完 成 率 ) : 用 尸 在 进入 你 的 产品 后 ， 是 否 能 够 完成 他 想 要 的 目标 ， 在 完成 这 个 目标 的 过 程 中 ， 效 率 是 否 高 ， 他 是 
否 感 总 操作 足够 便捷 ， 这 个 融 是 我 们 所 襄 的 操作 体验 。 我 们 用 完成 率 作 为 评价 操作 体验 的 指标 。 例 如 ， 用 户 购 买 迅雷 会 员 ， 他 从 
购买 到 完成 支付 的 过 程 中 是 否 有 阻碍 ， 如 果 有 很 多 未 完成 支付 ， 或 者 在 支付 过 程 中 放弃 ， 那 么 就 要 仔细 检讨 操作 体验 了 。 细 分 考 
量 指 标 ， 细 分 后 包括 用 户 到 达 率 、 用 户 操 作 步 骤 、 用 户 退 出 率 等 。 操 作 体 验 如 图 1-10 所 示 。 


主观 感受 (满意 率 ) :主观 感受 ， 即 用 户 在 使 用 完 产 品 后 ， 给 他 带 来 的 视觉 感受 、 操 作 体 验 、 内 容 价值 、 功 能 价 信 。 这 个 比 
较 好 理解 ， 细 分 后 考量 指标 有 整体 满意 度 、 学 习性 主观 评分 、 理 解 性 主观 评分 、 美 观 性 主观 评分 。 主 观感 受 如 图 1-11 所 示 。 


点 击 图 名 称 : 快 鸟 -页 面 点 击 图 统计 范 


图 1-10 ”操作 体验 
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图 1-11 用 户主 观感 受 


再 次 访问 (依赖 性 ) : 再 次 访问 是 用 户 在 使 用 产品 后 ， 第 二 次 及 以 上 的 访问 。 这 个 指标 非常 重要 ， 这 里 我 们 用 依赖 性 来 作为 
考量 指标 ， 即 用 户 对 产品 是 否 产 生 依赖 。 例 如 短信 ， 每 天 都 有 很 多 用 尸 要 打开 好 几 次 ,证 明 这 款 产 品 是 非常 有 价值 的 ， 用 户 已 经 
离 不 开 这 到 产品 了 。 如 果 用 户 人 在 使 用 你 的 产品 后 ， 大 部 分 人 都 不 再 来 了 ， 那 证 明 你 的 产品 是 不 能 给 用 户 审 来 有 用 的 价值 的 。 这 里 
我 们 细 分 衡量 它 的 指标 ， 细 分 后 有 回访 次 数 、 人 均 PV 量 等 


口碑 传播 (推荐 率 ) : 口碑 传播 束 是 用 户 在 使 用 你 的 产品 后 ， 主 动 和 他 人 分 享 ， 告 诉 他 人 这 个 产品 非常 好 用 ， 推 荐 他 人 都 来 


使 用 ;或 者 因 超 出 用 户 预 期 ， 用 己 很 兴 香 并 且 目 聂 地 人 在 朋友 圈 分 享 这 个 产品 ， 如 图 1-12 所 示 。 例 如 比较 火 的 POKEMONE GO 洲 
戏 束 引 爆 了 朋友 圈 。 这 里 细 分 衡量 它 的 主要 指标 ， 细 分 后 有 社交 口碑 传播 次 数 。 口 碑 传 播 示例 。 


«> 
证 类 还 插 好 看 的 哈哈 哈 ， 有 时 
不 再 像 以 前 那么 低俗 了 ， 还 
一 直 用 的 下 载 工具 会 越 做 越 


图 1-12 ”口碑 传播 《图 片 来 自 朋 友 较 截图 ) 


以 上 就是 体验 的 五 个 维度 ， 这 里 要 注意 的 是 ， 每 个 产品 的 体验 细 分 衡量 指标 都 不 一 样 ， 例 如 功能 性 的 产品 ， 更 多 是 看 操作 完 
成 率 ， 运 言 类 的 产品 更 多 是 看 用 户 转化 所 标 。 


3. 用 尸体 验 量化 维度 归纳 


我 们 结合 GPK 指 标 加 体验 维度 最 终 做 成 完全 量化 用 尸体 验 标准 的 表格 ( 见 图 1-13) ,该 表 非 常 系统 地 体现 了 用 尸体 验 量化 
维度 。 该 表 从 完成 五 维度 ， 到 细 分 用 户 的 具体 表现 ， 定 义 了 我 们 的 设计 目标 ， 及 最 后 要 完成 这 个 设计 目标 应 做 的 关键 设计 ， 以 此 
作为 设计 师 的 考核 标准 和 设计 方案 的 考核 标准 是 非常 有 用 的 。 该 表 并 没有 包括 所 有 不 同类 型 的 设计 指标 ， 只 是 一 个 示意 例子 ,不 
同 产 品 的 指标 是 不 一 样 的 。 例 如 ， 如 果 要 做 创新 设计 的 方案 ， 那么 该 表 束 不 太 适 用 了 ， 它 适用 于 常规 并 且 较 为 成 熟 的 产品 。 


有 了 这 一 套 体系 ， 可 以 很 直观 地 评价 设计 方案 到 底 哪 里 做 得 好 ， 哪 些 地 方 做 得 不 足 。 但 也 不 要 筷 记 ， 优 秀 的 设计 师 要 时 刻 保 
持 一 种 创新 的 心态 去 对 竺 产品 ， 那 样 才 能 走 得 更 远 。 


АЈА, 


通过 用 户 体 验 量化 验证 了 我 们 设计 方案 的 成 果 ， 在 此 过 程 中 一 定 会 友 现 很 多 问题 ， 故 需要 通过 收集 问题 ， 快 速 和 迭代 来 解决 我 
们 在 验证 过 程 中 出 现 的 问题 。 本 书后 面 的 章节 会 根据 EDM3 体 系 为 大 家 介绍 更 多 实战 案例 。 


目标 Goal 表现 Performance 设计 目标 Design Object 关键 事件 Key Results 


找到 感 兴趣 内 容 用 户 跳 出 率 低 
用 户 点 击 效 率 高 用 户 点 击 转 化 率 高 具体 设计 方案 
更 多 用 户 点 击 用 户 蹦 失 率 低 


更 多 用 户 使 用 目标 任务 
更 多 用 户 完 成 目标 任务 
用 户 更 快 完成 目标 任务 
操作 出 错 少 


用 户 到 达 率 高 用 户 操作 完成 时 间 短 
用 户 作 操作 步骤 少 用 户 退 出 率 低 具体 设计 方案 
用 户 操作 出 错 率 低 


学 习性 ,理解 性 
整体 满意 度 高 ”学 习性 主观 评分 高 
见 感 ПА E Kisi 
стае 理解 性 主观 评分 高 ”美感 主观 评分 高 具体 设计 万 案 


еч 经 常 访问 网 站 7 天 /30 天 /90 天 用 户 回访 率 高 _ 
РУЛА 查看 和 使 用 更 多 功能 人 均 PV 量 高 具体 设计 方案 


主动 分 享 和 向 他 人 推荐 £ 具体 设计 方案 


图 1-13 设计 验证 - 用户 体验 维度 量化 


1.1.6 ”总 结 
EDMS 是 一 套 设计 方法 和 归纳 体系 ， 能 够 很 清晰 地 指引 设计 师 完成 目标 ， 更 能 从 用 户 角度 出 发 来 考虑 用 户 体验 和 商业 价值 的 
平衡 ， 从 而 提升 产品 体验 和 商业 利益 ， 给 业务 带 来 价值 。 怎 么 才能 快速 掌握 这 套 体系 呢 ? 关键 还 是 要 多 了 解 公司 业务 ， 多 与 需求 


方 沟通 ， 记 录 下 他 们 的 需求 和 问题 ， 多 多 主动 探索 和 思考 设计 的 价值 ， 做 好 设计 准备 ， 因 为 这 些 都 是 制定 设计 目标 、 做 好 设计 方 
案 的 依据 。 这 套 体系 的 精髓 残 是 : 用 数据 来 驱动 设计 方案 。 


1.2 迅雷 9 诞生 


1.21 ”迅雷 9 概念 准备 篇 


1. 发 及 可 危 的 生态 环境 


迅雷 下 载 是 迅雷 公司 提供 给 用 户 的 核心 服务 ， 迅 雷 7 作 为 这 项 服务 的 载体 ， 从 2010 年 友 布 至 今 ， 因 过 度 运 营 使 得 其 商业 化 能 
力 减弱 ， 加 之 网 盘 、 人 在 线 视 频 、 移 动 互 联网 等 对 PC 下 载 的 侵蚀 ， 寻 求 新 的 产品 方向 势 在 必 行 。 在 产品 和 交互 推动 下 ， 我 们 开启 
了 迅雷 新 方向 的 探索 ， 基 于 对 生态 变化 、 业 务 扩展 及 移动 趋势 的 考虑 ， 新 的 迅雷 平台 束 随 之 诞生 。 图 1-14 所 示 为 迅雷 版 本 的 更 


“лю. 


2016 年 3 月 
2010 年 7 月 


2012 年 11 月 


图 1-14 ”迅雷 版 本 历史 

迅雷 面 对 的 挑战 主要 体现 在 以 下 方面 。 

(1) 互联 网 生态 变化 : 早 在 2010 年 前 ， 用 户 依 赖 的 狗 狗 搜索 、 电 驴 、BT 等 下 载 工 具 束 已 面临 调整 问题 ， 因 为 用 户 在 资源 的 
获取 方式 上 发 生 了 改变 。 而 随 之 而 来 的 是 网 盘 分 享 和 云 播 在 线 视 频 的 兴起 。 为 积极 响应 2014 年 净 网 行动 ， 百 度 网 盘 、360 网 盘 、 


迅雷 快 传 等 对 分 享 功能 和 云 仓储 功能 进行 优化 调整 ， 从 而 导致 用 户 企 资源 获取 和 消费 上 增加 了 难度 。 图 1-15 所 示 为 用 尸 从 获取 
资源 到 消费 的 完整 过 程 。 
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91-15 ”用户 从 获取 到 消费 资源 的 流程 


(2) 业务 友 展 需求 : 迅雷 7 自 友 布 以 来 ， 业 务 扩展 位 不 断 增 加 ， 包 括 小 黄 条 、 任 务 列表 广告 、 业 务 导航 、 边 角 广告 等 ,不 
断 透 支 产 品 体 验 ， 且 效率 低 ， 已 经 进入 一 种 死 循环 : 业务 转化 率 低 ， 融 增加 新 的 入 口 ; 而 新 的 入 口 在 过 了 新 鲜 周 期 后 ， 转 化 率 又 
开始 降低 ， 融 再 增加 入 口 。 为 了 更 长 人 地 上 友 展 ， 迅 雷 授 切 需 要 新 的 业务 承载 模式 。 图 1-16 所 示 为 迅雷 7 的 主 界面 。 
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(3) 移动 互联 网 趋势 : 据 CNNIC 数 据 显 示 ， 截 至 2016 年 上 半年 ， 我 国手 机 网 民 规模 达 6.56 亿 ， 使 用 手机 上 网 的 比例 占 忌 
网 民 的 92.5% ( 见 图 1-17) ， 手 机 在 上 网 设备 中 占据 主导 地 位 。 移 动 趋势 使 得 越 来 越 多 的 新 用 户 先 接触 移动 互联 网 再 接触 PC， 
搜索 和 内 容 也 呈 多 端 趋 势 ， 延 续 手 机 迅雷 的 核心 功能 成 为 必然 。 


81-17 手机 网 民 占 比 


讯雷 的 用 户 特征 


了 解 用 户 特 征 ， 才 能 更 好 地 为 用 尸 设 计 。 迅 雷 9 只 有 提供 更 便捷 的 寻找 资源 及 下 载 的 方式 ， 才 能 降低 新 用 尸 和 小 晶 用 户 的 使 
用 门槛 ， 从 而 进一步 为 新 版 的 概念 设计 提供 支撑 。 以 下 用 尸 特征 均 来 自 2016 年 年 初 的 用 尸 调 查 问 卷 。 


. 性 别 属性 : 迅 需 用 户 中 男性 占 比 较 多 ， 迅 雷 长 期 的 用 户 性 别 比例 没有 变化 。 在 资源 获取 上 ， 对 女性 用 户 来 说 有 较 高 门槛 ， 
作为 专业 的 下 载 工具 在 性 别 属性 上 更 男性 化 。 


. 家 庭 属性 : 迅雷 用 户 中 单身 用 户 占 比 接近 一 半 ， 而 无 小 孩 的 用 户 (包括 单身 ) 占 大 多 数 。 单 身 用 户 需 要 有 更 多 方式 来 打发 
时 间 ， 而 下 载 视频 成 为 其 打发 时 间 的 方式 之 一 。 


` 教育 属性 : 从 现 有 迅雷 用 户 的 教育 程度 来 看 ， 大 专 以 上 用 户 占 一 半 以 上 ， 用 户 潜 在 学 习 能 力 和 接收 能 力 较 高 。 


‚ 年 龄 属性 : 从 重度 用 户 、 中 度 用 户 、 轻 度 用 户 角 度 来 看 迅雷 用 户 的 生命 周期 ，80 一 95 后 是 迅雷 的 核心 用 户 群 。 其 中 95 后 以 
轻 度 用 户 为 主 ， 并 作为 迅雷 用 户 中 的 主要 新 进入 用 户 ; 80 后 以 重度 用 户 为 主 ， 作 为 考 用 户 的 最 后 和 留存。 迅雷 用 户 年 龄 段 在 20 一 35 
区 间 ， 整 体 生 命 周 期 较 短 。 


职业 属性 : 在 职业 大 属性 上 ， 白 领 用 户 群 体 占 比 最 高 、 学 生 群 体 次 之 。 从 具体 职业 上 看 ， 白 领 中 绝 大 多 数 为 非 互 联网 从 业 
者 ， 互 联网 使 用 能 力 偏 弱 。 


迅雷 9 概念 稿 的 诞生 


基于 迅雷 互联 网 生态 变化 、 业 务 友 展 需求 、 移 动 互 联网 趋势 以 及 迅雷 用 户 特 征 的 考量 ， 迅 雷 需 要 一 个 新 的 主页 来 承载 资源 上 友 
现 和 内 容 分 友 。 将 下 载 和 新 主页 结合 ， 并 以 此 为 出 友 点 ， 考 虑 产品 结构 ， 如 图 1-18 所 示 。 


图 1-18 新 版 迅雷 结构 方案 


(1) Tab 切 换 结构 ， 黑 认 “ 我 的 下 载 ”。 

` 优点 : 延续 了 迅雷 7 已 有 结构 ， 用 户 使 用 和 接受 门槛 最 低 。 

` 缺点 : 迅雷 作为 资源 发 现 的 入 口 引 寻 太 弱 ， 无 法 带动 产品 和 业务 的 转型 。 

(2) 浏 哆 器 结构 ， 黑 认 主 页 。 

优点: 更 好 地 承载 资源 发 现 与 业务 的 扩展 。 

缺点: 浏览 器 化 严重 伤害 下 载 用 户 的 习惯 ， 用 户 已 不 需要 额外 的 浏览 器 。 

(3) 拼合 结构 ， 左 侧 下 载 与 右 侧 主 页 。 

Жл: 主页 得 到 很 好 曝光 ， 对 引导 用 户 通 雷 找 资源 做 了 很 好 地 引导 ， 同 时 能 够 很 好 地 满足 业务 曝光 需求 。 


缺点 : 下 载 列 表 的 精简 对 于 老 用 户 来 说 需要 额外 的 适应 成 本 。 


出 于 产品 转型 和 业务 考量 ， 第 三 种 结构 更 符合 当前 定位 ， 迅 雷 9 第 一 版 的 概念 稿 诞生 如 图 1-19 所 示 。 
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91-19 ”迅雷 9 概念 图 


4. 来 目 用 户 的 易 用 性 测试 
概念 总 是 过 于 理想 ， 能 够 将 概念 方案 顺利 落实 ， 融 必须 得 到 一 些 用 户 的 验证 和 认可 ， 所 以 在 新 万 案 实施 之 前 我 们 进行 了 一 次 
吻 用 性 测试 。 
测试 目的 : 通过 DEMO 模拟 核心 功能 ， 快 速 验证 迅雷 9 的 用 户 接受 大 和 可 行 性 。 
用 户 选择 : 根据 是 否 是 新 用 户 以 及 对 PC 端 迅 雷 的 付费 及 卷 入 度 不 同 ， 把 用 户 分 为 四 类 。 
: 老 用 户 一 重度 用 户 : 钻石 会 员 、 白 金 会 员 用 户 ，PC 端 迅雷 卷 入 度 高 。 
ЖАР-ЖАР: 部 分 白金 会 员 、 普 通 会 员 用 户 ，PC 端 迅雷 卷 入 度 低 。 
' 新 用 户 一 竞 品 用 户 : 主要 使 用 其 他 下 载 工 具 离线 下 载 的 用 户 。 
: 新 用 户 一 小 白 用 户 : 对 电脑 、 上 网 有 固定 的 行为 模式 ， 不 精通 。 
我 们 将 找 这 四 类 用 尸 进行 研究 ， 覆 羡 男 / 女 、 日 领 / 监 领 /学 生 以 及 不 同 下 载 内 容 类 型 的 用 户 。 


老 用 户主 要 考察 其 对 下 载 习 惯 改 变 的 接受 度 ; 新 用 户主 要 观察 其 对 资源 获取 和 消费 的 使 用 行为 。 


5] 


研究 思路 以 定性 分 析 为 主 ， 主 要 分 三 个 部 分 : 迅雷 7 上 已 有 的 使 用 习惯 ,收集 可 用 性 反馈 ， 观 察 迅雷 9 核心 功能 的 使 用 ( 
图 1-20) 。 通 过 研究 结果 ， 确 定 迅雷 9 概念 万 案 的 可 行 性 以 及 执行 需要 注意 的 用 户 习 惯 。 


(1) 用 户 使 用 迅雷 的 行为 习惯 了 解 (2) 用 户 对 迅雷 9 概念 版 的 看 法 (3 ) 可 用 性 测试 任务 


什么 时 候 用 ? 概念 版 的 第 一 印象 尝试 创建 任务 

下 载 什么 内 容 ? 目 由 使 用 并 观察 用 户 习惯 体验 会 员 加 速 

从 哪里 获取 下 载 内 容 ? 对 界面 设计 的 认 知 和 立即 下 载 完 成 后 消费 

关注 哪些 下 载 信息 ? 试用 后 的 评价 体验 迅雷 9 全 网 搜 找 资源 
和 旧版 迅雷 的 对 比 


用 户 易 用 性 测试 的 结果 汇总 如 图 1-21 所 示 。 


从 用 尸 易 用 性 测试 的 结果 来 看 ， 正 面 评价 大 于 负面 ， 这 也 证 明 迅 雷 9 的 正确 性 。 同 时 在 具体 功能 的 实现 上 这 项 测试 给 予 了 很 
多 指导 ， 比 如 ， 保 留 老 用 户 对 下 载 列表 管理 的 习惯 、 蜗 级 功能 入 口 位 置 的 平 黎 、 增 强 资 源 友 现 的 引导 。 


图 1-21 ”用户 研究 结果 


1.2.2 ”迅雷 9 目标 定义 篇 


1. 产 品 如 何 满足 用 尸 需求 


迅雷 7 〈 见 图 1-22) 的 功能 和 业务 比较 分 散 ， 这 不 仪 影响 产品 目 身 功 能 体验 ， 而 且 无 法 给 业务 和 广告 提供 很 好 的 转化 率 。 迅 
雷 9 要 承载 原 有 内 容 ， 残 需要 进行 全 新 的 组 合 定 义 。 迅 雷 9 概 念 框架 分 成 左右 两 部 分 ， 故 需要 分 别 建立 目标 。 
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图 1-22 迅雷 7 功能 模块 


迅雷 9 元 侧 目标 定义 “下 载 管 理 ”。 将 所 有 下 载 相 天 操作 集中 在 元 侧 (包括 下 载 设 备 管理 、 下 载 任务 操作 、 下 载 状态 ) ， 这 
样 基于 右 侧 的 内 容 友 现 ， 可 以 更 好 地 形成 闭环 ( 见 图 1-23) 。 在 下 载 的 操作 体验 上 ， 采 取 的 策略 是 平移 用 己 习 惯 ， 并 使 其 适应 
小 界面 。 


91-23 ”迅雷 9 下 载体 验 闭 环 


迅雷 9 右 侧目 标定 义 “ 用 户 在 不 需要 下 载 时 ， 如 何 促使 其 主动 打开 迅雷 客户 病 ”。 右 侧 作 为 新 的 内 容 入 口 ， 将 “如 何 让 用 户 
接受 并 能 够 持续 使 用 ”作为 主要 目标 。 通 过 理性 分 析 并 提炼 出 最 终 的 内 容 模块 如 下 : 


` 找 资源 : 通过 提供 全 网 搜 ， 解决 新 用 户 找 资源 的 入 口 ， 对 于 老 用 户 则 无 须 在 其 他 应 用 中 切换 。 


‚ 短视 频 : 短视 频 具 有 阅读 成 本 低 、 适 合 碎片 化 消费 场景 的 特点 。 在 迅雷 9 上 无 论 是 下 载 前 的 观看 还 是 下 载 过 程 的 等 待 ， 都 
可 适用 ， 同 时 也 贴 合 迅雷 本 身 “ 作 内 容 发 行 ”的 愿景 。 


‚ 播放 记录 : 作为 用 户 持 续 消费 的 入 口 ， 在 视频 产品 中 尤为 重要 。 在 右 侧 提供 视频 消费 后 么 播放 记录 就 可 作为 基础 功能 
存在 。 


. 业务 输出 : 将 用 户 价值 转变 为 商业 价值 ， 这 是 公司 持续 发 展 的 支撑 。 迅 雷 9 的 右 侧 便 承 担 着 重要 的 业务 流量 和 输出、 转化 商 


业 价 值 的 职责 。 包 括 右 侧 顶 部 的 业务 导航 入 口 ， 右 侧 内 容 中 的 游戏 模块 和 直播 模块 。 


体现 在 迅雷 9 上 的 业务 目标 被 分 为 三 大 块 : 会 员 收 入 、 洲 戏 收 入 、 新 业务 流量 输出 。 


会 员 收 入 的 实现 : 会 员 收 入 通常 分 为 两 部 分 ， 即 新 会 员 开 通 ( 即 为 拉 新 ) 和 老 用 户 续费 《〈 即 为 留存 ) 。 拉 新 策略 包括 下 载 
任务 列表 中 的 会 员 试 用 、 会 员 加 速 、 头 像 信息 展示 、 会 员 换 肤 、 会 员 的 固定 入 口 等 ， 留 存续 党 策略 包括 下 载 列 表 小 黄 条 、 头 像 会 


员 信息 展示 区 、 俯 党 弹 窗 等 。 


. 游戏 收入 的 实现 : 固定 推广 入 口 ， 即 右 侧 首页 的 游戏 展示 模块 及 顶部 导航 入 口 ; 广告 位 入 口 ， 即 左 侧 下 载 列 表 关 键 词 广 告 


位 及 桌面 右 下 角 弹 窗 广告 位 。 


` 


. 新 业务 流量 输出 : 主要 满足 公司 在 新 领域 发 展 所 需要 的 曝光 量 和 流量 。 在 迅雷 9 上 则 集中 在 右 侧 首页 ， 包 括 导 航 、 内 容 展 


1. 似 曾 相识 的 下 载 
作为 一 款 几 年 没有 大 改版 的 老 产 品 ， 用 尸 已 经 形成 了 很 多 操作 习惯 ,在 新 版 下 载 模 块 设计 上 ， 将 采取 了 以 下 几 个 策略 : 


1) 平移 老 用 户 的 操作 ( 见 图 1-24) 。 


按 实 下载 记录 
私人 空间 
远 得 下载 

©) 设 车 中 心 


图 1-24 ”迅雷 9 下 载 列表 操作 设计 


2) 改变 不 合理 操作 : 将 高 速 通 道 和 离线 下 载 专业 术语 操作 合并 a 到 会 员 加 速 模块 。 这 不 仅 减 少 了 用 尸 操 作 ， 而 且 更 好 地 提高 


了 会 员 感 知 


ЙД} 


3) 引导 使 用 更 便捷 操作 : 通过 统计 数据 ， 将 用 尸 常用 的 “继续 下 载 ” “暂停 ”“ 边 下 边 播 ” 等 高 频 操作 默认 显示 。 
Д) 低频 操作 隐藏 : 将 多 选 、 排 序 、 搜 索 下 载 记录 等 低频 操作 隐藏 。 
5) 定制 功能 按 需 展示 : 诸如 私人 空间 、 下 载 宇 等 下 载 设备 管理 功能 ， 当 用 户 开 局 后 ， 展 示 出 设备 切换 。 


6) accordion 结 构 的 下 载 列 表 : accordion 绪 构 中 文 直译 为 “手风琴 结构 ”， 这 其 实 是 一 种 界面 设计 中 的 列表 样式 ， 原 则 上 
保持 表 的 唯一 展开 状态 。 换 名 话说， 无 论 整个 列表 有 多 少 选项 ， 只 有 唯一 的 一 个 是 处 于 展开 状态 的 ， 其 他 的 选项 全 部 收 起 。 这 样 
的 做 法 可 在 有 限 的 空间 展示 更 多 的 内 容 片段 。 在 这 里 我 们 对 列表 的 hover 状 态 做 了 特殊 处 理 ， 每 次 当 用 户 的 鼠标 移动 到 左 侧 区 域 
的 时 候 ， 列 表 项 会 上 移 ， 并 出 现 分 割 式 的 点 击 状态 ， 这 样 就 有 功能 提醒 的 作用 ， 提 升 操作 效率 ， 如 图 1-25 所 示 。 
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图 1-25 迅雷 9 下 载 列 表 导 航 设 计 


下 页 的 概念 绿 于 石 侧 的 资源 窗口 ， 也 是 对 新 产品 的 实际 考量 。 首 页 的 设计 承载 着 各 个 业务 的 需求 ， 也 是 迅雷 9 的 一 个 特色 。 
然而 这 一 特色 受到 来 目 老 用 户 的 极 大 挑战 ， 因 为 他 们 在 以 一 个 下 载 工具 的 态 厦 对 竺 迅雷 9， 再 加 上 资源 内 容 的 限制 ， 这 让 下 页 设 
计 的 落地 变 得 异常 艰难 。 


(1) 内 容 形式 设计 


迅雷 9 首页 主要 承载 着 影视 、 游 戏 、 和 直播、 美 图 四 个 业务 ， 其 中 影视 来 源 于 第 三 方 ， 游 戏 、 上 直播 、 美 图 均 为 迅雷 公司 目 己 的 
业务 。 首 页 除了 信息 上 的 展示 外 ， 还 要 为 业务 保留 一 定 的 入 口 ， 那 么 必要 的 信息 已 经 整理 出 来 : 导航 + 搜索 + 业务 展示 。 


业务 展示 的 形态 大 概 可 以 分 为 两 种 : 一 种 是 传统 网 页 流体 式 的 设计 ; 一 种 是 Tab 切 损 式 的 设计 。 流 体式 设计 优点 在 于 可 以 承 
载 更 多 的 信息 ， 业 务 的 拓展 及 形式 也 可 以 更 加 多 样 ，Tab 切 换 式 在 形式 和 内 容 上 要 求 比较 严格 ， 对 于 业务 也 是 一 种 束缚 。 迅 雷 9 
的 首页 分 为 了 两 个 阶段 ， 在 刚 上 续 的 时 候 采 用 的 融 是 沅 体式 的 设计 ， 这 保证 了 业务 方 的 需求 ， 但 是 在 信息 展示 上 却 不 是 很 好 。 采 
用 流体 式 设计 没有 出 现在 首 屏 的 内 容 的 曝光 率 是 极 低 的 ， 而 且 这 些 内 容 是 没有 经 过 筛选 的 ， 束 是 简单 粗暴 地 平 铺展 示 ， 因 此 我 们 
做 了 调整 ， 才 有 了 Tab 切 换 式 的 首页 。 采 用 Tab 切 换 式 虽然 对 于 业务 的 展示 有 一 定 束缚 ， 但 是 在 形式 上 更 加 统一 。 


(2) 特色 设计 


首页 设计 的 特色 定位 于 “异形 ”与 “卡片 式 ”， 异 形 增加 了 首页 的 设计 感 及 定制 化 。 异 形 的 设计 不 会 让 用 尸 产 生 “ 拉 取 ” 的 
想法 。 卡 片 式 设计 也 是 近年 来 较为 流行 的 一 种 设计 方式 ， 其 可 以 很 好 地 对 内 容 信 息 进行 区 分 。 在 设计 上 ， 我们 要 求 每 一 屏 的 Tab 
都 有 目 己 的 业务 特色 ， 同 时 也 要 兼容 设计 上 的 统一 ， 这 算是 一 个 比较 复杂 的 要 求 ， 所 以 我 们 允许 业务 方 企 每 一 屏 的 Tab 上 使 用 目 
己 的 标准 色 ， 这 也 是 我 们 首页 设计 中 的 一 个 亮点 : 规范 之 中 保持 特色 ， 从 而 形成 色彩 丰富 的 首页 。 


(3) Web-max 应 用 的 官网 设计 


Web-max 是 一 种 网 页 设计 方式 ， 即 利用 视 完 聚焦 ， 在 电脑 屏幕 上 营造 Imax 电 影 般 的 即 视 感 。 目 前 很 多 网 站 都 会 使 用 Web- 
max， 人 在 保证 整个 网 页 浏览 器 中 只 有 一 个 视 党 焦点 的 情况 下 ， 尽 量 分 散 不 必要 的 信息 ， 让 整个 页 面 看 起 来 非 党 大气。 


这 是 一 种 由 现实 反 推 过 来 的 视 竞 效果， 来源 于 Imax 电 影 技 术 ， 通 过 提供 超过 人 类 视野 聚焦 学 围 的 影像 ， 打 造 震 撼 及 身 虱 其 
境 的 效果 。 电 脑 屏 幕 肯定 不 如 Imax 电 影 屏幕 那么 大 ， 所 以 提供 的 视 党 范围 是 有 限 的 。 如 果 我 们 刻意 将 画面 的 焦点 放 在 屏幕 的 中 
心 ， 并 且 进 行 视 嘻 引导 ， 那 束 会 与 Imax 一 样 ， 给 人 以 震撼 的 视 守 体验。 所 以 在 排版 上 ， 我 们 尽量 让 LOGO、 导 航 和 文字 信息 靠 
近 网 页 的 边缘 ， 将 画面 的 视 况 中心 定 位 在 网 页 的 中 心 位 置 。 


迅雷 9 使 用 了 太 衬 作为 设计 的 主题 ， 因 此 官网 也 采用 了 一 致 的 主题 设计 。 新 产品 上 续 要 有 一 些 概念 性 的 信息 传递 。 无 论 是 从 
体验 习惯 还 是 产品 定位 来 襄 ， 迅 雷 9 都 有 了 很 大 的 改变 ， 在 有 限 的 页 面 表达 清楚 这 些 内容 是 较为 困难 的 ， 所 以 我 们 用 了 一 种 隐喻 
的 手法 来 表现 迅雷 9 的 产品 特点 ， 这 样 可 以 让 用 户 在 使 用 迅雷 9 之 前 有 一 个 心理 准备 ， 对 于 老 用 户 来 说 这 也 是 一 种 负责 的 态度 。 


第 一 屏 : 我 们 设计 了 一 个 市 9 字 的 星云 黑洞 ， 五彩 斑 澜 的 色彩 汇聚 在 一 起 ， 这 代表 迅雷 9 是 一 个 资源 聚合 体 ， 黑 洞 是 可 以 容 
纳 一 切 的 ， 这 与 迅雷 9 的 平台 理念 是 相符 的 。 


第 二 屏 : 穿越 星云 ， 我 们 来 到 了 时 空 隧道 ， 这 里 代表 我 们 对 下 载体 验 的 技术 升级 。 
第 三 屏 : 友 现 新 的 星云 体系 ， 代 表 我 们 将 在 一 个 新 的 世界 中 探索 友 现 。 
第 四 屏 : 在 新 世界 也 许 会 给 你 一 些 惊 喜 ， 比 如 划 过 你 视线 的 流星 ， 这 会 让 你 在 新 的 世界 中 有 更 多 回忆 ，。 


迅雷 9 的 设计 灵感 如 图 1-26 所 示 ， 最 终 效 果 如 图 1-27 所 示 。 


图 1-26 迅雷 9 设计 灵感 
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安装 界面 的 设计 比 官 网 的 设计 更 重要 ， 因 为 用 尸 可 能 会 在 不 同 的 渠道 下 载 到 安 六 包 ， 官 网 并 不 是 唯一 的 下 载 途 径 ， 但 是 安 六 
界面 是 每 一 个 用 户 都 无 法 跳 过 的 ， 所 以 要 珍惜 安 闪 界面 的 用 户 教 育 和 信息 展示 。 由 于 受到 扁平 化 趋势 的 影响 ， 很 多 软件 采用 了 简 
约 的 安 妆 界面 ， 这 样 的 好 处 在 于 让 用 户 快速 进入 界面 ， 并 体验 软件 。 迅 雷 9 起 初 的 设计 也 采用 了 类 似 的 方案 ， 在 设计 的 过 程 中 ， 
我 们 认为 虽然 有 了 简约 ， 但 是 同时 失去 了 固有 的 特色 。 文 字 的 摘 述 也 不 能 直观 体现 产品 的 特色 ， 迅 雷 9 较 以 往 版 本 ， 界 面 面 积 是 
比较 大 的 ， 那 么 我 们 可 以 在 安 妆 界面 给 予 一 定 的 引导 ， 让 整个 界面 呈现 的 时 候 不 会 那么 突 元 。 

迅雷 9 主 界面 是 与 太空 有 天 的 ， 我 们 在 进入 太空 之 前 是 不 是 需要 离开 地 球 ” 这 个 想法 的 出 现 让 我 们 有 了 明确 的 思路 。 在 用 户 
扣 击 “立即 安 效 ”按钮 的 瞬间 ， 界 面 会 直接 拉 壳 、 拉 长 到 默认 界面 的 尺寸， 出 现 城 市 的 地 平 线 ， 用 己 上 自己 在 飞船 的 驾驶 舱 内 ， 随 

ИНЧЕ, 飞船 快速 升 到 太空 中 ， 并 且 出 现 了 市 有 科技 感 色彩 的 界面 ， 以 及 天 于 界面 的 结构 介绍 ， 整 个 过 程 束 犹如 用 户 目 
己 融 是 雪 驶 员 。 在 整个 动画 结束 之 后 ， 开 局 迅雷 9 的 探索 之 旅 。 


迅雷 9 的 安 濠 启动 及 过 程 如 图 1-28 和 图 1-29 所 示 。 


迅雷 9 起 航 带 你 大 开眼 界 ша: 
XUNLEI9 TAKE YOU EYE-OPENING — 


4 .局 平 化 助力 的 “ 轻 ” 设 计 风格 探索 


“ 轻 ” 设 计 风 格 融 是 去 除了 见 余 、 厚 重 和 繁杂 的 妆 饰 效果 ， 具 体 表现 在 去 把 了 多 余 的 适 视 、 纹 理 、 渐 变 以 及 能 做 出 3D 效 果 的 
元 素 ， 这 样 可 以 让 “信息 ”本 身 重 新 作为 核心 被 突显 出 来 。 同 时 在 设计 元 素 上 ， 则 强调 了 抽 销 、 极 人 简 和 符号 化 。“ 轻 ”设计 主要 
采用 扁平 化 设计 。 扁 平 化 设计 的 优势 已 经 在 许多 产品 中 得 到 了 验证 ,迅雷 9 也 可 以 尽 可 能 地 去 套用 这 样 的 规则 ， 可 是 扁平 化 过 多 
地 抹 去 了 产品 本 身 的 设计 特色 。 届 平 化 设计 是 一 种 将 一 任性 提升 到 最 高 级 别 的 做 法 ， 适 用 于 移动 端 及 系统 级 别 的 设计 ， 而 迅雷 9 
作为 一 个 应 用 ， 还 应 该 在 局 平 化 风格 的 基础 上 保留 自己 的 特色 。 
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迅雷 9 定位 于 一 个 资源 资讯 平台 ， 和 希 刻 用 户 在 享受 下 载体 验 的 同时 ， 能 获得 更 多 感 兴 趣 的 内 容 ， 且 要 承载 比 之 前 版 本 更 多 的 
言 轧 量 ， 所 以 在 默认 的 风格 设计 上 一 定 要 干净 、 轻 僵 ， 这 样 才 不 会 对 信息 造成 干扰 ， 用 尸 也 不 会 因 长 时 间 阅 读 而 反感 和 困扰 ， 


对 于 界面 的 干净 我 们 可 以 从 自然 界 中 寻找 一 些 灵 感 ( 见 图 1-30) : 羽毛 可 以 迎风 起 飞 ， 薄 公 英 可 以 随 风 飞 扬 ， 水 母 可 以 顺 
流 漂 浮 …… 这 些 大 都 给 人 很 轻便 、 干 净 的 感 狗 ， 从 中 我 们 可 以 总 结 出 迅雷 9 设计 风格 的 天 键 词 : 浅 色 、 线 状 和 透明 。 


图 1-30 迅雷 9 “£” 设计 灵感 


探索 是 迅雷 9 的 另外 一 个 设计 万 向 。 从 设计 语言 来 说 这 一 点 是 很 难 表 现 的 ， 需 要 我 们 定义 一 个 主题 ， 来 衬托 探索 的 仿 义 。 探 
索 又 可 以 分 为 友 现 未 知 和 研究 已 知 两 个 方 同 ( 见 图 1-31) ， 友 现 未 知 会 给 人 以 遐想 的 空间 ， 为 此 我 们 还 进行 了 一 次 简单 的 联想 
推测 。 而 这 些 推测 结果 当中 ， 太 空 比较 符合 我 们 的 产品 定位 。 这 里 产生 了 一 个 了 矛 慎 ， 说 到 太空 ， 大 多 数 人 的 印象 是 “漆黑 一 片 ， 
繁星 点 感 ”， 这 与 我 们 对 轻 的 追求 是 相反 的 ， 故 需要 通过 一 些 特殊 的 设计 手法 来 处 理 。 我 们 通过 一 种 类 似 “ 反 色 ” 的 效果 ， 打 造 


了 一 个 浅 色 版 的 宇宙 空间 ( 见 图 1-32) ， 经 过 整体 的 协调 与 优化 ， 我 们 确定 了 运用 轻 量 化 的 色彩 表达 太空 主题 的 设计 风格 。 
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设计 规范 属于 VI (全 称 Visual Identity， 即 视 总 识别 系统 ) 的 沁 畴 。 对 于 设计 规 施 ， 往 大 了 说 ， 可 以 与 企业 VI 并 雪 齐 驱 ; 往 
小 了 说 ， 也 可 以 圈 点 产品 的 边 边 角 角 、 根 据 产品 不 同 阶段 的 需求 对 设计 规范 做 及 时 调整 。 现 在 VI 的 运用 比 传统 意义 的 VI 更 加 灵 
HB. 

无 规 粉 不 成 万 贺 ， 设 计 规 范 说 到 底 是 针对 某 一 个 产品 而 做 的 要 求 ， 这 也 是 设计 团队 对 产品 严谨 负责 人 态度 的 体现 。 设 计 规 范 大 
致 可 以 分 为 以 下 几 氮 : 


-色彩 规范 : 定义 产品 的 主 色 、 辅 助 色 ， 同 时 还 包括 颜色 应 用 的 场景 。 
` 字体 规范 : 定义 不 同 字 号、 字体 的 运用 。 


. 控件 规范 : 定义 可 以 通用 的 弹 窗 、 按 钮 、 滚 动 条 、 文 字 框 等 样式 。 控 件 因为 运用 较 多 ， 需 要 尽早 定义 ， 这 也 是 整个 设计 规 


范 中 最 重要 的 部 分 。 
- 尺寸 规范 : 定义 各 图 标 大 小 、 模 块 间距 、 切 图 尺寸 。 
` 素材 规范 : 定义 后 期 运营 的 素材 ， 如 人 物 的 大 小 ， 素 材 的 样式 。 
那么 为 什么 要 花 时 | 间 去 制定 一 个 产品 的 设计 规范 呢 ? 自然 因为 它 有 如 下 的 诸多 好 处 : 
. 统一 识别 。 界 面 中 相同 元 素 具 有 识别 统一 性 ， 可 以 避免 用 户 产 生理 解困 扰 。 
“ 节约 时 间 。 界 面 中 出 现 的 相同 元 末 ， 设 计 师 可 直接 规范 使 用 ， 这 样 不 仅 可 以 很 好 地 控制 设计 质量 ,而且 提 升 了 设计 效率 。 
易于 上 手 。 当 有 新 的 设计 师 加 入 项 目 时 ， 可 以 利用 规范 快速 上 手 。 


设计 规 沁 是 如 何 运 作 的 ”首先 收集 产品 中 出 现 的 控件 元 素 ， 其 次 对 这 些 元 素 进行 整理 ， 最 后 对 参与 该 产品 设计 的 同学 进行 规 
汇 的 讲解 。 下 面 束 介绍 迅雷 9 规 沁 的 设计 ， 如 图 1-33 ~ 图 1-35 所 示 。 


1. 来 目 用 户 的 反馈 


迅雷 9 从 内 测 到 上 线 ， 收 到 了 很 多 用 户 的 反馈 ， 有 正面 的 也 有 上 反面 的 ， 来 源 包 括 迅雷 9 用 户 QQ 群 、 论 坛 、 微 博 等 ( 见 图 1- 
36) 。 正 面 评价 ， 多 为 安 委 界面 的 炫 酷 、 下 载 询 表 的 简洁 、 全 网 搜索 的 方便 。 而 反面 评价 主要 针对 右 侧 首页 ， 这 也 是 目前 争议 
最 多 的 部 分 。 从 公司 层面 来 讲 ， 迅 雷 不 应 该 是 个 单纯 的 下 载 工 具 ， 它 应 该 可 以 承载 更 多 的 内 容 。 用 己 用 迅雷 是 为 了 得 到 内 容 ， 而 
不 仅仅 为 了 “下 载 ” 这 个 行为 。 对 于 视频 内 容 而 言 ， 用 户 的 消费 途径 已 经 企 由 “下 载 后 观看 ” 往 “ 在 线 观 看 ”这 个 方式 转变 。 迅 
雷 9 相信 和 能够 为 用 户 提 供 一 些 精 选 的 内 容 ， 并 且 通 过 右 侧 这 个 载体 来 为 用 尸 呈 现 。 对 于 一 个 新 的 功能 模块 ， 会 有 人 喜欢 ， 也 会 有 
人 反感 ， 但 大 部 分 人 是 反对 变化 的 (这 是 很 正常 的 ， 甚 至 认为 这 是 人 类 正当 的 心理 ) 。 对 于 一 个 处 于 推广 急 期 的 产品 ， 面 对 这 样 
大 的 改变 ， 有 必要 让 用 户 先行 体验 。 
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图 1-33 迅雷 9 控件 规范 
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2 数据 的 反馈 与 产品 迭代 
迅雷 9 正式 上 线 、 日 活跃 用 户 在 百 万 规模 时 的 数据 反馈 (包括 产品 功能 和 商业 价值 的 ) 如 下 : 
迅雷 9 新 LOGO 设 计 可 识别 性 更 强 ， 用 户 通过 桌面 图 标 和 任务 栏 启动 较 迅 雷 7 时 高 出 一 
' 迅雷 9 登录 入 口 强化 ， 登 录 面 板 重新 设计 ， 用 户 整体 的 登录 率 提升 明显 。 
. 迅雷 9 将 “高 速 通道 加 速 ” “离线 下 载 加 速 ”专业 词组 合并 到 “会 员 加 速 ”， 通 过 动画 效果 增强 展示 效果 和 迅雷 9 会 员 付费 
渗透 率 ， 对 新 会 员 用 户 拉 新 提升 效果 明显 。 


数据 和 用 尸 的 有 反馈 是 对 产品 设计 最 好 的 验证 ， 也 为 后 续 的 迭代 优化 提供 了 有 力 的 支撑 。 在 接 下 来 很 长 的 一 段 时 间 里 ， 迅 雷 9 
都 在 经 历 着 两 周一 个 版 本 的 快速 迭代 。 其 中 仅 主 页 前 后 束 经 历 4 个 大 的 版 本 优化 (从 A~D 版 , 见 图 1-37) : 


ë еа Ew” F'jyg- (Oman (wm - Wan эч ле 


шл G€ mp2 z 


зас (пла) 区 气 了 是 rupa =т= ОЗИ 
& ч Wm R. ЫС 


ИТИЙ вили ви мав 


а Е) 
наана 
= 33069 


1-37 迅雷 9 首页 版 本 演变 
Аж: 采用 灰色 导航 和 内 容 滚屏 设计 ， 属 于 传统 页 面 (上线 后 内 容 转 化 差 ， 用 户 反 馈 内 容 广告 化 ) 。 
В: 进行 了 轻 量化 设计 ， 采 用 单 屏 内 容 自 动 切 换 方 式 ， 增 强 了 业务 曝光 〈 短 视频 和 游戏 内 容 转化 均 提升 1 倍 ) 。 
Сй: 基于 B 版 在 视觉 和 内 容 上 进行 了 丰富 ， 考 虑 了 更 多 业务 内 容 ， 增 加 了 酒 渍 直播、 美 图 写真 等 内 容 。 


ОЖ: 更 加 明确 的 主页 设计 ， 以 短视 频 内 容 为 主要 方向 。 主 页 结构 上 采用 伪 单 屏 设 计 (较为 轻 量 化 的 设计 ) ， 视 频 内 容 采 
取 静 音 自 动 播放 (更 直接 的 内 容 消费 ) o 


至 截稿 时 ，D 版 正 处 于 灰 度 友 布 期 。 除 此 之 外 ,， 其 他 功能 的 体验 优化 也 一 直 在 进行 ， 在 追求 完美 的 道路 上 ， 迅 雷 9 的 设 
计 师 们 也 一 直 在 努力 着 。 


13 ЯЛЕ Велт 


1.31 手机 迅雷 安 卓 5.0 设 计 背 景 


手机 迅雷 在 2012 年 友 布 第 一 版 至 今 已 经 有 好 几 个 年 头 了 。 手 机 迅雷 原来 定位 是 移动 冰 最 快 最 好 用 的 下 载 工 具 ， 但 随 着 产品 
的 友 展 ， 找 资源 的 功能 越 来 越 凸 显 。 为 了 更 好 地 传达 产品 特色 ， 进 一 步 优 化 找 资 源 等 核心 功能 ， 在 满足 用 尸 需 求 的 同时 能 提高 
业 价值 ， 我 们 对 手机 迅雷 进行 了 重新 定位 ， 即 进行 了 Android 5.0 的 改版 设计 ( 见 图 1-38) 。 


手机 运 雷 2. 欠 手机 迅雷 4, 六 


2013.04-2014.02 2014.04-2015.02 


2012.11-2013.03 2014.03-2014.08 2015.03-#— 


=H 1.Хх =L B3.X =l aB 5.X 


91-38 ”手机 迅雷 版 本 发 布 时 间 轴 


1.3.2 ”设计 准备 一 一 定量 的 数据 与 定性 的 调研 


1. 定 量 的 数据 分 析 


(1) РЯ 


在 设计 准备 阶段 ， 诈 移 要 了 解 我 们 的 用 户 。 我 们 对 手机 迅雷 的 用 户 做 了 属性 的 研究 ， 截 取 了 30 天 的 数据 ， 分 别 对 TOP 10: 
道 新 增 用 尸 、 深 道 活跃 用户 、 渠 道 启 动 次 数 、 蛙 次 使 用 时 长 、 次 日 留存 率 这 五 项 进行 评分 ， 并 对 每 项 得 分 从 高 到 低 排 序 ， 排 名 第 
一 的 渠道 加 10 分 ， 第 十 的 渠道 加 1 分 ， 得 分 越 高 的 渠道 综合 用 尸 质 量 越 高 ， 满 分 50 分 。 


那么 高 质量 的 用 户 分 别 来 自 哪里 呢 ? 经 评估 和 分 析 发 现 ， 广 东 和 北京 的 用 户 量 最 大 ， 高 质量 用 户主 要 分 布 在 沿海 地 区 和 京 广 
沿线 。 其 中 中 国 移动 用 户 据 据 半壁 江山 (56%) ， 且 大 多 数 是 在 WiFi 环 境 下 使 用 ， 鼎 70%。 


从 15248 个 分 享 授权 用 户 看 用 户 群 属性 缩影 : 男性 用 户 偏 多 ， 且 最 多 的 为 90 后 ， 以 公司 职员 居多 ， 兴 趣 爱 好 为 IT、 电 影 电 视 
行业 则 以 自由 职业 、 制 造 加 工业 最 多 ， 大 部 分 分 布 在 北京 、 上 海 、 广 州 等 地 。 


用 户 构成 (3022) 如 图 1-39 所 示 。 由 图 可 知 ， 用 户 忠 诚 度 较 高 ， 每 周 活跃 用户 中 ， 上 忠诚 用 尸 (连续 活跃 5 周 ) 占 比 近 半 。 


高 质量 用 户 是 谁 ? 
用 户 构成 ( 30 天 ) 每 周 活跃 用 户 中 ， 忠 诚 用 户 ( 连续 活跃 5 周 ) 占 比 近 半 ， 用 户 忠诚 度 较 高 
Ж 
Fl " " и а n 
Bl | 国 


2015-03-09 2015-03-16 2015-03-23 2015-03-30 2015-04-06 2015-04-13 | 04-20 2015-04-27 
В 新 用 户 В 本 用 KR 用 户 图 连续 BFK2 周 用 户 图 连续 活 斤 3 周 用 户 。 国 ш=шшыин= ғә 


91-39 用户 构成 


用 户 新 鲜 度 (3 个 月 ) 如 图 1-40 所 示 。 


由 上 图 可 知 ， 日 活路 用户 中 ，30 天 前 新 增 用 户 占 比较 高 ， 用 户 对 产品 的 新 鲜 度 保持 较 高 。 


由 此 我 们 得 出 结论 : 局 质量 用 户 中 ， 老 用 户 占 比较 大 ， 而 新 增 用 户 留 存 率 较 局 。 由 此 可 见 ， 维 系 老 用 户 、 加 强 新 用 户 引 导 极 


(2) 用 户 使 用 习惯 


用 户 什么 时 候 用 呢 ” 从 图 1-41 所 示 中 可 以 看 到 ， 我 们 的 活跃 用 户 、 新 增 用 记 、 局 动 次 数 的 数据 轨迹 局 度 吻 合 ， 均 人 在 周末 和 
节假日 出 现 峰 值 。 


用 户 新 鲜 度 ( 3 个 月 ) 日 活跃 用 户 中 ，30 天 前 新 增 用 户 占 比 较 高 ， 用 户 对 产品 的 新 鲜 度 保 持 较 高 


02-03 02-15 02-22 03-01 03-08 03-15 03-22 03-29 04-05 04-12 04-19 04-25 05-03 


高 质量 用 户 中 ， 老 用 户 占 比 较 大 ， 而 新 增 用 户 留 存 率 也 较 高 ， 可见 : 维系 老 用 户 ， 加 强 新 用 户 引导 极为 重要 
1-40 ”新 鲜 度 
在 时 段 局 动 次 数 和 时 段 活跃 用 户 的 图 中 ( 见 图 1-42) 可 以 友 现 下 面 三 个 点 : 
1) 124 小 时 时 段 中 ， 活 路 用户 数 与 启动 次 数 数 据 走势 高 度 吻合 ; 
2) 紧 计 数据 友 现 : 平时 (周一 到 周 五 ) 高 峰 时 段 趋势 一 致 为 午休 时 段 (12 点 左右 ) 、 下 班 时 段 (18 点 左右 ) ; 
3) 紧 计 数据 发 现 : 节假日 (假期 / 周 六 日 ) 高 峰 时 段 趋 势 一 致 为 起 床 后 (8 点 左右 ) 和 了 晚饭 后 (19 点 左右 ) 。 
用 户 使 用 习惯 趋势 一 一 什么 时 候 下 载 安 丢 ? 
图 1-43 是 用 尸 下 载 行为 趋势 图 ， 从 图 中 可 以 友 现 有 两 个 时 段 比 较 明显 的 特点 : 
1) 午休 时 间 段 (12 点 ~ 14 点 ) 和 晚饭 后 新 增 用 户 量 出 现 增 长 ， 其 中 晚饭 后 持续 递增 ， 直 至 24 点 后 达到 峰值 。 
2) 与 时 段 用 户 局 动 次 数 与 活跃 数量 的 用 户 峰 值 数据 走势 吻合 。 
用 户 点 了 几 个 页 面 ， 下 次 什么 时 候 用 ”如 图 1-44 所 示 ， 从 用 户 访问 页 面 分 布 可 以 看 出 : 
1) 大 部 分 用 户 访问 1 ~ 2 个 页 面 ， 目 的 性 较 强 ， 目 标明 确 ， 浏 览 性 需求 较 少 ; 平均 访问 5 个 页 面 可 完成 搜索 。 


2) 24 小 时 内 再 次 局 动 客 己 端的 用 尸 占 比 极 高 ， 襄 明 手 机 迅雷 可 满足 用 户 强 需求 ， 用 户 藉 性 高 。 


活路 用户 ( 30 天 ) 
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图 1-41 
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图 1-44 ”用 户 访问 页 面 与 使 用 间隔 


基于 数据 ， 得 到 我 们 的 用 尸 模型 如 图 1-45 所 示 。 


е: ГОЛ 

职业 ;公司 职员 

爱好 : |T 汽车 游戏 电影 
看 网 易 刷 微 信 

装备 : 三 星 Galaxy Note3 
网 络 : 移动 4G 包 月 +Wifi 


іа ЕЗЕРА ЕИ рр. 

- 对 搜索 的 准确 性 、 内 容 质量 要 求 较 高 

` 大 多 数 W 币 环境 下 使 用 客户 哨 

' 平时 中 午 和 晚上 使 用 较 多 、 周 末 早 晚 使 用 

4 小 时 以 上 空 立时 间 使 用 率 高 ， 碎 片 化 时 间 使 用 少 

“ 晚上 使 用 时 间 较 长 较 集中 

“ 家 里 ( Wifi ) 也 多 使 用 手机 上 网 、 看 视频 、 看 新 闻 、 玩 游戏 ， 嫌 开 电 脑 麻 烦 

` 晚上 睡 客 前 ， 一 定 会 向 在 床上 看 一 会 了 手机 有 再 睡 希 

“ 使 用 目的 性 较 强 ， 局 动 直 接 进 入 下 载 中 心 或 搜索 

"下载 完 成 直接 在 下 载 中 心 点 击 播放 观看 ， 继 续 观 看 时 仍 去 下 载 中 心 点 击 播放 

“ 会 多 次 启动 客户 端 查看 正在 下 载 内 容 进度 

“ 习惯 了 免费 资源 获取 ， 但 愿意 在 更 多 的 特权 和 资源 的 基础 上 成 为 付费 会 员 
91-45 ”用户 画像 


通过 定量 的 数据 分 析 ， 从 高 质量 用 户 的 来 源 、 用 户 属 性 等 特征 ， 我 们 抽象 得 到 手机 迅雷 安 捍 版 的 用 户 模型 ， 通 过 研究 用 户 的 
行为 特征 ， 我 们 了 解 到 用 户 使 用 手机 迅雷 的 习惯 (21-46) ， 那 么 这 些 使 用 习惯 ， 对 我 们 设计 有 什么 参考 和 帮助 呢 ? 


' 客户 端 获取 渠道 多 为 在 手机 下 载 时 推荐 “加强 用 户口 碑 

' 对 搜索 的 准确 性 、 内 容 质 最 要 求 较 高 . 搜索 功能 持续 优化 

` 大 多 数 Wifi 环 境 下 使 用 客户 端 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 “网 络 连 接 提醒 

“ 平时 中 午 和 晚上 使 用 较 多 、 周 末 早 晚 使 用 ` 推广 和 更 新 内 容 、 新 版 本 等 在 用 户 使 用 集中 时 间 段 发 布 
` 1 小 时 以 上 空闲 时 间 使 用 率 高 ， 碎 片 化 时 间 使 用 少 “一 一 用 户 对 产品 的 认 知 和 定位 较 明 确 ， 同 事 也 相对 固化 

“ 晚上 使 用 时 间 较 长 较 集中 “ 可 增加 夜间 浏览 及 视频 观看 模式 

- 家 里 ( Wifi ) 也 多 使 用 手机 上 网 、 看 视频 、 看 新 闻 、 玩 游戏 ， 嫌 开 电脑 麻烦 · 手机 APP 用 户 市 场 空间 极 大 ; 内容 资源 优化 、 精 准 营销 
` 晚上 睡觉 前 ， 一 定 会 身 在 床上 看 一 会 手机 再 睡觉 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 > “ 夜间 浏览 、 播 放 模 式 : 在 线 播放 或 下 载 播 放 入 口 设计 优化 
* 使 用 目的 性 较 强 ， 启 动 直 接 进 入 下 载 中 心 或 搜索 * 多 为 老 用 户 ， 增 强 新 用 户 功能 通道 ， 提 高 留存 率 

“下载 完成 直接 在 下 载 中 心 点 击 播放 观看 ， 继 续 观 看 时 仍 去 下 载 中 心 点 击 播放 ' 在线 播放 或 下 载 播放 入 口 设计 优化 

` 会 多 次 启动 客户 端 查看 正在 下 载 内 容 进度 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 “ 下 载 速 度 感知 ， 下 载 进度 可 视 化 优化 

* 习惯 了 免费 资源 获取 ， 但 愿意 在 更 多 的 特权 和 资源 的 基础 上 成 为 付费 会 员 * 会 员 特 权 推 广 


91-46 ”使 用 习惯 对 应 的 设计 优化 点 


通过 用 户 使 用 手机 迅雷 的 行为 习惯 ， 我 们 列 出 了 一 一 对 应 的 设计 优化 点 。 比 如 ， 用 户 对 搜索 的 准确 性 、 内 容 质量 要 求 比较 
高 ， 那 么 我 们 在 设计 的 时 候 要 特别 注重 搜索 功能 的 持续 优化 ; 又 比如 ， 用 户 晚 上 使 用 的 时 间 较 长 、 较 集中 ， 那 么 我 们 人 在 设计 的 时 
候 应 该 要 考虑 是 否 可 以 增加 夜间 浏览 及 视频 观看 模式 。 这 些 设计 优化 点 的 提取 ， 对 我 们 在 改版 的 过 程 中 制定 具体 的 设计 方案 ， 以 
及 安排 优先 级 都 有 很 大 的 帮助 。 


2. 定 性 的 用 户 行 为 分 析 


(1) 体验 地 图 一 一 用 户 的 问题 与 期 望 


通过 定量 的 数据 分 析 得 出 用 尸 模型 和 用 户 使 用 习惯 ,其 中 的 关键 是 提取 设计 优化 后 。 


制作 行为 地 图 ( 见 图 1-47) ， 友 现 用 户 在 一 些 关 键 行为 路 径 中 直到 的 问题 ， 并 给 出 解决 问题 ， 这 是 用 定性 的 用 户 分 析 ， 来 
进一步 确定 设计 要 优化 的 方向 和 问题 。 


通过 制作 行为 地 图 ， 我 们 看 到 用 户 关 键 的 行为 路 径 是 这 几 个 : 搜索 、 下 载 、 观 看 。 每 个 关键 路 径 上 ， 用 户 都 会 有 一 些 顺 畅 的 
体验 和 产生 的 问题 。 行 为 地 图 中 在 这 几 个 关键 行为 路 径 里 用 户 遇 到 的 问题 ， 有 解决 这 些 问题 相应 的 方案 ， 其 中 很 多 方案 在 手机 迅 
雷 5.0 版 本 设计 中 已 经 得 到 体现 。 
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91-47 行为 地 图 


(2) 用 户 需 求 层级 分 析 一 KANO 模 型 


通过 定性 的 用 户 访 谈 和 分 析 ， 我 们 做 了 用 户 对 手机 迅雷 的 需求 的 KANO 模 型 ( 见 图 1-48) ， 友 现 用 户 对 手机 迅雷 的 期 望 因 
素 和 魅力 因素 基本 都 是 集中 在 快速 找到 资源 和 快速 下 载 上 。 这 也 是 非 钊 符合 手机 迅雷 的 产品 定位 的 ， 说 明 手 机 迅雷 早已 不 是 单纯 
的 下 载 工 具 了 。 


KANO 模型 


魅力 因素 


快速 找到 稀缺 资源 
自动 师 选 资源 优 务 


存在 度 低 存在 度 高 
必 备 因素 
і 反 向 因素 
反 向 因素 必 备 因素 
找 不 到 资源 能 找到 资源 
下 载 后 的 资源 无 法 播放 满意 度 低 顺利 下 载 ， 流 畅 播放 


下 载 速度 慢 


图 1-48 ” ”KANO 模型 


1.3.3 ”设计 目标 一 一 用 尸 目 标 与 业务 目标 相 结 合 


前 面 通 过 数据 分 析 用 尸 和 使 用 习惯 ,通过 行为 地 图 等 分 析 用 户 在 使 用 过 程 中 存在 的 问题 和 解决 方案 ， 得 出 用 己 对 手机 迅雷 的 
需求 层级 KANO 模 型 等 ， 所 有 这 些 都 为 得 出 用 尸 目标 。 那 么 提 遍 产品 的 商业 价值 等 ， 便 是 手机 迅雷 的 业务 目标 。 


结合 用 户 目标 和 业务 目标 得 出 手机 迅雷 5.0 版 本 的 设计 目标 ( 见 图 1-49) : 
. 产品 认 知 ， 从 视频 应 用 转变 成 找 资源 、 下 资源 、 看 资源 的 应 用 。 


-优化 核心 功能 


找 资源 ， 使 得 找 片 、 下 片 、 看 片 一 气 呵 成 。 


. 提高 商业 价值 ， 提 升 迅雷 会 员 转 化 率 。 


` 提升 整体 用 户 体验 。 
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图 1-49 “手机 迅雷 5.0 设 计 目 标 


下 面 围绕 这 四 个 设计 目标 ， 讲 述 我 们 做 了 哪些 设计 方案 ， 取 得 了 哪些 成 效 。 


1.34 目标 导向 的 设计 方案 和 成 效 


1. 改 善 用 户 对 产品 认 知 的 方案 与 成 效 


Results) 四 个 部 分 构成 。GPK 指 标 体 系 的 目的 是 


前 面 讲 过 ，GPK 指 标 体 系 由 忆 目 标 (Goal) 、 表 现 (Performance) 、 设 计 目 标 (Design Object) 、 关 键 事件 (Key 


计 目 标 是 否 达 成 。 


im, 


下 面 就 以 实现 手机 迅雷 的 四 个 设计 目标 为 例 来 看 看 GPK 指 标 体 系 的 具体 应 用 。 
目标 一 (G) : 改善 用 户 对 产品 的 认 知 。 
表现 (Р): 
: 将 用 户 对 产品 的 第 一 印象 由 原来 的 影视 应 用 改变 为 找 资源 、 下 资源 与 观看 资源 为 一 体 的 更 全 面 的 应 用 。 
更 多 的 用 户 来 手机 迅雷 找到 资源 。 
设计 目标 (DO) : 
“ 提升 用 户 对 手机 迅雷 产品 更 全 面 的 认 知 。 
` 提升 找 资源 的 使 用 率 。 
关键 事件 : (KR) 
` 优化 底部 导航 ， 去 除 多 余 信 息 ， 使 结构 更 加 清晰 ; 
` 优化 首页 结构 ， 弱 化 下 载 ， 突 出 搜索 找 资源 功能 ，; 
“ 优化 首页 内 容 、 资 源 打 包 成 专题 形式 ， 使 内 容 更 加 丰富 。 
这 里 GPK 指 标 体系 中 的 关键 事件 (KR) 是 达成 设计 目标 要 做 的 事情 ， 其 实 就 是 落实 的 “设计 方案 ” 


用 户 对 产品 的 认 知 ， 往 往 由 两 个 方面 : 导航 与 首页 。 手 机 迅雷 2.0 底 部 四 个 导航 Tab， 下 载 是 其 中 之 一 ， 首 页 除了 推荐 次 
还 没有 搜索 功能 ， 如 图 1-50 所 示 。 所 以 手机 迅雷 2.0 的 版 本 中 用 户 对 产品 的 认 知 更 偏向 是 个 下 载 工具 . 


4.0 版 本 ， 帮 部 Tab 资 源 分 类 变 多 ， 增 加 了 搜索 框 ， 弱 化 了 下 载 ， 下 载 移 到 了 顶部 搜 送 栏 旁 边 ， 但 用 户 对 手机 迅雷 的 认 允 ， 


是 个 和 迅雷 看 看 、 腾 讯 视频 、 爱 奇 艺 类 似 的 视频 应 用 ， 如 图 1-51 所 示 。 


定义 要 完成 设计 目标 具体 要 做 哪些 方案 设计 ， 并 通过 这 些 方案 来 进一步 衡量 设 


图 1-50 “手机 迅雷 2.0 主 界面 
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图 1-51 手机 迅雷 4.0 主 界面 


手机 迅雷 ?5.0， 顶 部 搜索 栏 已 经 占据 了 最 核心 和 重要 的 位 置 ， 手 机 迅雷 已 看 上 去 不 是 一 个 单一 的 视频 网 站 ， 而 是 集 搜 索 、 下 
载 、 观 看 为 一 体 的 应 用 ， 如 图 1-52 所 示 。“ 找 资源 ”是 手机 迅雷 的 一 大 特色 。 
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91-52 “手机 迅雷 5.0 主 界面 


此 外 ， 首 页 资源 精华 浓缩 ， 比 如 4.0 版 本 中 每 个 类 型 ， 如 电视 、 电 影 、 动 漫 等 资源 全 部 展开 ，a 到 5.0 版 本 改 成 大 部 分 以 专题 形 
陈 推荐 ， 使 诈 屏 推荐 的 内 容 更 多 样 和 聚焦 精华 ， 让 用 户 产 生 兴 趣 。 


目标 一 成 效 : 改版 后 ，5.0 版 本 用 尸 认 知 更 符合 产品 传达 万 向 ， 核 心 功能 “搜索 ”比重 占 兽 页 的 60%， 且 首页 跳出 率 降 低 
676。 


2. 核 心 功 能 优化 的 方案 与 成 效 


我 们 再 用 GPK 指 标 体系 来 前 述 手 机 迅雷 设计 目标 二 。 


目标 二 (G) : 优化 手机 迅雷 找 资源 的 核心 功能 。 


表现 (P) : 


` 使 用 搜索 功能 的 人 数 和 频率 增加 。 


. 资源 结果 内 容 呈 现 更 加 清晰 友好 。 


. 找 资源 的 步骤 更 简单 顺畅 。 


设计 目标 : (ОО) 


:增加 搜索 功能 的 使 用 率 。 


‚ 优化 资源 结果 的 体验 。 


` 提升 找 资源 的 效率 。 


关键 事件 : (KR) : 


· 增加 搜索 路 径 


资源 详情 页 搜索 。 
优化 搜索 结果 ， 同 类 资源 归 类 ， 合 并 成 文件 夹 。 
“ 搜索 结果 反馈 路 径 的 体验 优化 。 


如 果 襄 PC 病 迅 雷 7.0 的 核心 功能 是 下 载 ， 那 么 手机 迅雷 又 增加 了 找 资源 的 核心 功能 。 下 面 融 看 看 为 了 达成 设计 目标 二 而 做 的 
关键 事情 ， 即 设计 方案 。 


(1) 增加 搜索 路 径 : 资源 详情 页 搜索 


在 观察 用 尸 的 行为 路 径 过 程 中 我 们 友 现 ， 当 用 尸 友 现在 资源 详情 页 展示 的 资源 并 不 是 他 所 要 查找 的 资源 时 ， 他 会 返回 到 原来 
的 路 径 ， 重 新 进行 搜索 。 因 此 我 们 在 资源 详情 页 增加 了 搜索 ， 这 样 可 以 缩短 用 户 再 次 返回 的 行为 路 径 ， 提 升 重新 找 资源 的 效率 。 
详情 页 搜索 界面 如 图 1-53 所 示 。 


(2) 优化 搜索 结果 : 同类 资源 归 类 ,合并 成 文件 夹 
除了 对 搜索 路 径 进 行 优化 外 ， 对 于 搜索 的 结果 我 们 也 做 了 很 多 用 尸体 验方 面 的 优化 。 


在 4.0 版 本 里 ， 用 户 搜 索 的 结果 的 展现 是 非 单 乱 的 。 举 个 例子 ， 用 户 查 找 录 影视， 搜索 结果 呈现 的 是 无 数 议 影视 的 集 数 ， 没 
有 经 过 整理 ， 查 找 定 位 某 一 集 很 困难 。 而 在 5.0 版 本 设 中 ， 我 们 对 搜索 结果 做 了 同类 资源 归 类 ， 将 同类 资源 合并 打包 成 一 个 文件 
夹 ， 相 当 于 对 资源 结果 做 了 收纳 盒 整理 ， 这 样 用 尸 对 搜索 结果 融 一 目 了 然 了 ， 如 图 1-54 所 示 。 
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图 1-53 ”详情 页 搜索 
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91-54 ”同类 资源 归 类 
(3) 搜索 返回 路 径 体 验 的 优化 
原 返 回路 径 : 3 一 1。 
修改 后 路 径 : 3 一 2 一 1。 


那么 为 什么 多 出 中 间 一 页 2，2 是 什么 页 呢 ? 2 是 搜索 结果 页 ，3 是 搜索 详情 页 ， 从 3 返回 2 我 们 认为 更 加 合理 。 因 为 当 用户 对 
搜索 详情 页 不 满意 的 时 候 ， 如 果 返 回 到 1 (1 是 搜索 前 置 员 ) ， 融 要 重新 进行 搜索 ， 重 新 等 竺 加载 2， 如 果 从 3 返回 2， 融 减少 了 用 
户 对 当前 资源 不 满意 重新 进行 搜索 的 行为 操作 和 等 待 时 间 。 


这 个 看 似 简单 的 改动 ， 其 实 花费 了 开发 人 员 很 大 精力 。 因 为 5.0 之 前 的 版 本 一 直 是 3 到 1 这 样 的 返回 路 径 ， 好 像 大 家 都 习 避 
了 ， 但 这 实际 上 是 非常 不 符合 用 户 预期 的 ， 用 户 体验 不 是 很 好 ， 而 如 果 要 做 改动 优化 ， 开 发 改动 量 很 大 。 但 返回 路 径 的 优化 确实 
对 用 户 体验 的 提升 很 有 帮助 。 最 后 的 效果 也 印证 了 我 们 的 预期 ， 搜 索 返 回路 径 优化 后 ， 我 们 在 用 户 群 里 收 到 了 不 少 老 用 户 的 好 
še, 


返回 路 径 优化 示意 如 图 1-55 所 示 。 


图 1-55 ”返回 路 径 优 化 


(4) 目标 二 的 成 效 
搜索 效率 的 提升 减少 了 用 户 等 待 和 得 找 的 时 间 ， 同 时 对 搜索 结果 页 及 搜索 路 径 的 优化 ， 整 体 提 升 了 拷 资 源 的 体验 。 
3. 目 标 三 : 提升 会 员 转 化 的 商业 价值 方案 与 成 效 
同样 用 GPK 指 标 体系 来 阐述 手机 迅雷 设计 目标 三 。 
目标 三 (G) : 提升 手机 迅雷 的 会 员 转 化 率 。 
表现 (P) : 
- 在 下 载 场景 下 ， 有 更 多 的 用 户 为 加 速 而 充值 成 为 会 员 。 
充值 流程 顺畅 无 阻碍 。 
设计 目标 : (DO) : 
` 提升 关键 场景 下 载 页 面 的 会 员 支 付 转化 。 
' 优化 支付 体验 ， 提 升 支付 成 功率 。 
关键 事件 : (KR) : 
-优化 下 载 页 ， 在 合适 的 用 户 需 求 场景 下 曝光 会 员 加 速 。 


. 优化 支付 ， 缩 短 流 程 ， 减 少 页 面 跳 转 。 


- 优化 支付 还 辑 ， 支 付 前 置 。 
(1) 下 载 场景 支付 优化 


在 手机 迅雷 中 ， 下 载 场景 的 支付 转化 率 对 于 手机 迅雷 来 说 非常 重要 。 这 不 难 理解 ， 用 户 在 下 载 场景 中 经 常会 直到 一 些 问题 ， 
比如 速 厦 慢 、 有 毕 次 源 不 可 下 载 等 ， 这 个 时 候 ， 如 果 告 诉 用 户 开 通 会 员 ， 下 载 速度 加 会 大 大 提升 ， 不 可 下 载 的 任务 残 可 以 顺利 下 
载 ， 用 户 是 不 是 会 很 乐意 的 去 开通 呢 ? 


在 4.0 版 本 中 ，“ 下 载 中 ”和 “已 完成 ”是 两 个 Tab， 在 53.0 版 本 中 ， 我 们 把 下 载 中 和 已 完成 合并 成 一 个 页面 ， 并 且 增 加 了 下 
载 推荐 ， 如 图 1-56 所 示 。 


原来 4.0 版 本 中 ， 开 通 会 员 的 按钮 在 资源 详情 页， 而 人 资源 详情 页 属于 三 级 页 面 ， 通 过 长 按 下载 任务 条 才 会 出 现 资 源 详情 页 ， 
也 融 是 襄 开 通 会 员 的 按钮 藏 得 及 其 深 ， 很 多 人 都 还 很 难 友 现 ， 如 图 1-57 所 示 。 


在 5.0 版 本 中 ， 我 们 把 会 员 开通 按钮 前 置 到 了 一 级 的 下 载 列 表 页 ( 见 图 1-58) , 


虽然 下 载 询 表 增 加 了 会 员 加 速 的 按钮 ， 但 并 不 是 盲目 地 硬性 引导 用 户 付 费 ， 而 是 根据 用 户 场景 在 合适 的 时 间 给 予 用 户 提 醒 ， 
比如 如 下 场景 : 


. 检测 到 用 户 并 非 会 员 ， 但 经 常 下 载 大 数据 的 场景 。 
. 当 某 个 文件 链接 不 可 用 ， 开 通 会 员 通 过 高 速 通 道 可 以 解决 的 场景 。 


当 整 体 下 载 速度 过 慢 ， 开 通 会 员 可 以 大 大 加 速 的 场景。 
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91-56 ”合并 支付 页 面 
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(2) 支付 流程 优化 


如 图 1-59 所 示 ， 支 付 的 流程 原来 需要 从 1 到 2， 现 在 我 们 把 1 和 2 页 面 直接 合并 成 一 个 页 面 3。 
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图 1-59 ”支付 流程 优化 


1 页 面 其实 束 是 两 个 选项 ， 快 捷 序 值 和 激活 码 充 值 。 


其 实 很 多 用 户 都 使 用 快捷 序 值 ， 也 束 是 用 支付 宇和 微 信 充 值 ， 很 少 有 用 户 用 激活 码 充 值 ， 所 以 在 页 面 3 中 ， 我 们 把 激活 码 支 
付 履 到 一 个 不 重要 的 位 置 惑 可 以 了 ， 没 有 必要 出 现 一 个 单独 的 页 面 让 用 户 选择 。 多 一 步 操作 ， 融 意味 着 多 一 毕 法 失 率 ， 转 化 率 残 
会 降低 。 


(3) 支付 逻辑 优化 
在 安 卓 手机 应 用 中 ， 在 未 登录 的 情况 下 ， 是 付费 比较 麻烦 ， 还 是 登录 比较 麻烦 ? 


其 实现 在 微 信 支 付 和 支付 宝 支 付 的 易 用 性 已 经 做 得 非常 好 了 ， 反 而 登录 才 是 用 户 感 最 麻烦 的 事情 。 数 据 显示 ， 用 尸 点 击 了 
文 付 ， 登 录 过 程 中 的 流失 率 所 占 比 重 是 很 高 的 。 


图 1-60 所 示 是 对 文 付 逻 辑 的 优化 。 


开通 会 员 入 口 开通 会 员 入 口 
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图 1-60 ”支付 逻辑 优化 


我 们 把 登录 后 置 ， 将 未 登录 的 用 户 先 引 流 到 文 付 界面 。 这 样 做 一 是 可 以 提前 展示 会 员 特权 ; 二 是 符合 一 个 原则 ， 最 困难 的 事 
放 到 最 后 一 步 。 这 和 游戏 打 怪 练 级 的 道理 一 样 ， 最 后 一 级 需要 的 经 验 是 最 多 的 。 


(4) 目标 三 的 成 效 
通过 下 载 场景 优化 、 支 付 流程 优化 、 支 付 钦 辑 优化 等 设计 ， 手 机 迅雷 在 5.0 版 本 中 ， 会 员 转 化 率 得 到 了 很 好 的 提升 。 


下 载 列表 支付 转化 率 由 原来 占 手 机 了 迅雷 总 转化 率 的 30% 提 升 到 70%， 同 时 总 体 的 支付 页 面 开通 会 员 人 数 和 收益 均 比 之 前 增长 
7 100%, 


4. 整 体 的 用 尸体 验 的 改善 与 成 效 


产品 整体 用 户 体验 的 提升 ， 从 全 局 目标 定位 到 核心 功能 的 体验 优化 ， 再 到 各 页 面 的 细节 与 动 效 微 交互 等 的 设计 都 是 息 息 相 天 
的 。 目 标 一 改善 用 户 对 产品 的 认 知 ， 目 标 二 对 核心 功能 体验 进行 优化 ， 目 标 三 在 合适 的 场景 下 给 用 户 推荐 会 员 加 速 等 ， 这 些 都 给 
用 户 市 来 了 好 的 体验 和 价值 。 以 下 再 举 一 些 典型 的 案例 ， 包 括 个 人 页 优化 、 其 他 微 交 互 设计 等 ， 这 些 也 可 提升 产品 整体 的 用 户 体 
验 。 


(1) 个 人 页 优化 


对 于 个 人 页 的 优化 ， 我 们 先 撕 测 用 户 的 行为 路 径 和 心理 ， 然 后 通过 数据 分 析 ， 模 拟 用 户 行 为 地 图 等 ， 最 后 再 洲 实 到 方案 。 
5.3 版 本 将 个 人 中 心 部 分 资源 外 露 ， 更 符合 用 户 的 行为 预期 ， 个 人 中 心 的 点 击 率 明显 增强 ， 增 加 了 视频 消费 数据 。 优 化 前 如 图 1- 
61 所 示 ， 优 化 后 如 图 1-62 所 示 。 
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91-62 个 人 页 优化 后 


类 整合 ， 维 度 更 清晰 ， 布 局 更 合理 : 
间 比 例 缩小 ， 预 留 更 大 区 域 显示 用 户 关注 的 内 容 ， 以 符合 用 户 心理 预期 。 


个 人 页 信息 架构 重新 分 
=> 


= Ë. 
> 


积分、 任务 、 礼 包 、VIP 在 同一 维度 展示 ， 结 构 更 清晰 。 


' 播放 记录 、 下 载 中 心 、 常 用 设置 更 直观 。 将 点 击 量 高 、 与 “我 ”关联 性 强 的 内 容 交互 层级 提高 ， 并 默认 展示 最 近 和 最 常用 


的 多 条 ， 减 少 用 户 操作 步骤 ， 使 其 能 第 一 时 间 找 到 预期 内 容 。 
(2) 个 人 页 优化 结果 


优化 后 ， 部 分 展露 的 内 容 完 全 符合 用 尸 的 心理 预期 。 下 载 中心 一 更 多 、 下 载 设置 、 播 放 记 录 - 更 多 占 了 个 人 页 点 击 率 的 前 三 
位 ， 如 图 1-63 所 示 。 


Ш 下 载 中 心 - 更 多 
ш 下 载 设置 

Ш 播放 记录 - 更 多 
Ш 播放 记录 列表 
Ш 选择 存储 路 径 
Ш 设置 -更 多 

Ш 任务 入 口 

Ш 远程 下 载 


Ш 下 载 列表 
Ш IP 入口 
Ш 积分 入 品 
Ш 礼包 入 口 


91-63 ”个 人 点 击 
(3) 其 他 体验 优化 


此 外 通过 细节 打磨 ， 趣 闻 iocn 的 微 交 互 、 播 放 器 的 优化 、 增 加 夜间 模式 等 也 整体 提升 了 用 户 体验 ， 如 图 1-64 所 示 。 
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91-64 其 他 体验 优化 


(4) 目标 四 成 效 


个 人 页 、 播 放 器 优化 等 ， 包 括 乙 前 的 搜索 等 体验 优化 都 给 用 尸 市 来 了 体验 提升 ， 用 户 体验 整体 提升 。 


1.3.5 ”目标 导 同 设计 的 结语 


设计 不 是 纯粹 的 画 交 互 稿 、 视 党 稿 ， 我 们 也 应 该 有 驱动 产品 改进 、 实 现 商 业 价值 的 责任 与 追求 。 


在 产品 设计 的 前 期 ， 通 过 数据 分 析 、 用 户 调 研 等 方式 做 充分 的 设计 准备 ， 重 要 的 是 读 懂 用 户 ， 了 和 解 用 尸 的 属性 、 来 源 ， 分 析 
用 己 的 行为 、 习 惯 ， 以 及 在 使 用 产品 的 时 候 存 在 的 问题 、 最 希望 产品 解决 的 问题 等 。 有 了 这 些 充足 的 准备 ， 我 们 才能 更 明确 地 制 
定 设 计 目 标 。 再 通过 GPK 指 标 体系 细 化 目标 ， 以 设计 目标 为 导向 制定 相应 的 设计 方案 。 一 步 步 有 理 有 据 地 解决 问题 、 达 成 目标 ， 
使 看 似 感性 的 设计 变 得 理性 ， 为 用 户 市 来 更 好 的 体验 ， 也 为 业务 市 来 更 大 的 商业 价值 。 


14 迅雷 会 员 俱乐部 


迅雷 会 员 官网 作为 会 员 用 户 的 专属 平台 ， 是 服务 于 ?00 万 会 员 的 重要 门户， 也 是 引导 新 用 户 转 化 的 重要 渠道 。 随 着 超级 会 


员 、 年 费 会 员 的 上 线 ,会 员 体 系 不 断 完善 ， 会 员 类 型 更 加 丰富 ， 我 们 将 致力 于 打造 高 端 会 员 用 户 的 尊贵 感 与 身份 象征 ， 所 以 旧版 
官网 逐渐 满足 不 了 会 员 产 品 和 运营 的 需求 。 超 级 会 员 上 线 仅 1.5 个 月 会 员 用 户 量 突破 6 万 ， 用 户 对 综合 性 会 员 及 尊贵 身份 的 热情 超 
出 我 们 的 预期 ， 改 版 势 在 必 行 。 因 此 我 们 开局 了 全 新 官网 的 改版 行动 。 


在 改版 的 整个 过 程 中 ， 我 们 应 用 了 EDMS 方 法 论 ， 从 设计 分 析 a 到 目标 转化 ， 从 设计 方案 落地 到 设计 验证 ,一 步 步 打 造 了 一 个 


全 新 的 会 员 俱乐部 。 


1.4.1 设计 准备 


在 开始 着 手 改 版 设计 之 前 ,我们 做 了 一 系列 的 设计 分 析 ， 从 数据 、 用 尸 、 竞 品 三 个 维度 ， 定 性 与 定量 相 结 合 ， 通 过 分 析 数 据 
发现 问题 、 定 位 问题 ， 通 过 研究 目标 用 己 定 义 用 户 需 求 ， 通 过 分 析 莞 品 广 告 位 找到 产品 定位 ， 为 即将 开展 的 设计 做 好 充足 准备 。 


1. 数 据 分 析 


从 会 员 官 网 首页 广告 位 轮 播 图 的 点 击 量 数 据 我 们 得 若 ， 当 轮 播 标题 为 “最 强 福 利 日 ”时 ， 即 便 该 内 容 在 第 三 帧 ， 其 点 击 量 也 
远 高 于 曝光 率 高 的 第 一 帧 和 第 二 帧 ， 可 见 用 尸 的 内 容 驱 动 性 极 强 ， 且 对 福利 的 关注 度 较 高 ， 如 图 1-65 所 示 。 
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第 一 帧 0л ”第 三 帧 рл 
图 1-65 ”会 员 官 网 首页 轮 播 图 点 击 量 
从 会 员 官 网 导航 栏 的 页 面 点 击 量 数据 来 看 ，“ 和 福利 特权 ”页 面 的 点 击 量 远 低 于 其 他 页 面 。 由 此 可 见 ， 用 户 对 和 福利 的 认 知 不 仪 
限于 福利 券 ， 且 用 户 在 页 面 停留 时 间 短 ， 故 需 第 一 时 间 捕 捉 到 信息 ， 跳 转 和 主动 筛选 效果 较 替 。 同 时 ， 还 可 以 得 出 ， 用 户 对 “个 
人 信息 ”和 “迅雷 特权 ”的 点 击 量 较 高 ， 因 此 可 知 ， 用 户 更 关注 与 自身 强 相 关 的 内 容 并 希望 了 解 可 以 享用 的 会 员 特 权 和 福利 。 相 
天 数据 如 图 1-66 所 示 。 


从 会 员 官 网 的 用 尸 类 型 数据 可 以 得 出 ， 会 员 官 网 上 非 会 员 和 新 用 尸 的 占 比 极 高 ， 如 图 1-67 所 示 ， 所 以 针对 非 会 员 转 化 、 新 
用 户 教育 及 留存 的 有 效 设 计 ， 对 会 员 官 网 的 整体 业绩 提升 会 有 较 大 的 帮助 。 


从 各 渠道 用 户 登 录 数 据 来 看 ， 会 员 官网 上 用 户 登 录 的 数据 远 低 于 迅雷 7 和 手机 迅雷 等 渠道 ， 如 图 1-68 所 示 。 由 此 可 各， 迅雷 
用 户 对 场景 和 功能 的 依赖 性 更 强 ， 在 客户 端 和 APP 上 结合 功能 的 使 用 为 强 需求 ， 主 动 访问 官网 的 动机 较 弱 ， 用 户 刺 激 不 足 ， 黏 性 
较 低 。 


一 级 导航 点 击 量 


迅雷 特权 “理财 特 权 ”福利 特权 精彩 活动 ”我 的 会 员 超级 会 员 
图 1-66 ”会 员 官 网 一 级 导航 点 击 量 
НР 
1 新 用 户 占 比较 大 
非 会 员 占 比较 大 
用 户 类 型 


вата 日 金 会 员 ”超级 会 员 раш ФР ”新 用 户 


图 1-67 访问 会 员 官 网 用 户 类 型 


登录 次 数 


| | 一 一 一 》 平 台 类 型 


迅雷 PC 客户 端 ” ”迅雷 手机 客户 端 会 员 官 网 
会 员 中 心 会 员 中 心 


图 1-68 ”会员 用 户 各 渠道 登录 次 数 


最 终 得 到 的 用 尸 类 型 和 用 户 行 为 如 图 1-69 和 图 1-70 所 示 。 


通过 数据 i 会 员 福 利 的 关注 度 较 高 
可 以 看 出 会 员 官 网 深 道 上 的 a rhe а= 
用 户 特征 及 行为 习惯 i 会 员 特 权 的 关注 度 较 高 
访问 会 员 官网 目的 性 极 强 ， 且 停留 时 间 短 ， 浏 览 性 需求 较 少 
关注 与 自身 强 相关 的 内 容 
姓名 : 小 雷 希望 可 以 了 解 会 员 能 享用 的 会 员 特 权 及 福利 
= > 非 会 员 和 新 用 户 访 问 次 数 较 多 ， 做 为 详细 了 解 迅 雷 会 员 的 重要 入 口 
星座 : 摩羯 座 需要 续 蓉 时 会 主动 访问 会 员 官 网 
Wd 需要 查看 会 员 信息 时 会 主动 访问 官网 


委 好 : 上 T、 汽 车、 游戏 电影 其 他 主动 访问 会 员 官网 的 动机 不 强 ， 对 官网 的 依赖 性 较 弦 


用 户 行 为 


”了 解 会 员 特 权 与 福利 一 ” 融 悉 什么 是 迅雷 会 员 ‚ “хи Мад. 


了 解 会 员 类 型 与 差异 …… 查看 可 以 享用 的 会 员 福利 及 特权 l 查看 可 以 享用 的 会 员 福利 及 特权 
浏览 会 员 福利 与 活动 一下 一 ”浏览 会 员 活动 下， 查看 会 员 活动 


图 1-70 ”人 官网 用 户 行为 

结合 用 户 特 性 及 三 类 型 用 尸 在 官网 的 行为 属性 二 加， 可 以 看 出 : 

1) 官网 需 增加 “会 员 介 绍 ”， 满 足 非 会 员 和 新 用 己 对 会 员 了 解 的 需求 。 

2) 官网 需 增 加 “成 长 规则 ”， 满 足 用 户 对 比 不 同 会 员 之 间 特 权 差 寞 的 需求 。 

3) 官网 需 加 强 福利 及 特权 的 展示 及 介绍 ， 且 在 用 户 进 入 官网 后 第 一 时 间 可 以 捕捉 到 该 信息 。 

4) “会 员 介绍 (特权 ) + 会 员 福利 + 会 员 活动 + 个 人 信息 + 续费 ”是 用 户 核 心 需求 ， 且 需要 第 一 时 间 捕 捉 信 息 ， 因 而 可 在 官 
网 首页 进行 展示 。 
2. 广 告 位 分 析 


我 们 进行 了 一 次 广告 位 专题 研究 ， 分 析 的 维度 包括 广告 位 的 内 容 组 成 、 文 案 、 形 式 、 交 互 布局 、 廊 式 、 反 馈 等 ， 如 图 1-71 
所 示 。 


布局 
交互 | “操作 方式 


啊 应 反馈 


А + 主 图 + 标题 + 按钮 


夸张 + 利诱 + 关怀 + 生活 化 + 系列 化 + 拆 分 


+ 固定 广告 位 + 固定 轮 播 + 下 拉 + 抽 居 式 + 弹出 


头 部 + 贴 边 + 板块 衔接 + = + Кир 
БА + 05 + 拖 搜 + Б 
ЮЕ + 动画 + 切换 + 显示 隐藏 内 容 


图 1-71 广告 位 分 析 维 度 


针对 官网 广告 位 的 应 用 ， 把 落脚 点 放 在 了 头 部 轮 播 图 的 样式 、 组 成 、 文 案 、 操 作 方 式 和 相应 反 饶 上， 如 图 1-72 所 示 。 其 中 
轮 播 图 缩 略 的 方式 可 以 让 用 户 快 速 定位 且 提 高 多 个 轮 播 图 的 曝光 ， 这 对 我 们 的 局 友 很 大 。 


轮 描 图 缩 略 


轮 揪 内 容 并 快速 定位 
有 效 提高 多 个 轮 : 的 院 光 展示 


通用 底 图 与 色调 ， 各 组 成 元 素 的 


减少 运 车 成 本 的 同 | 
ë qa š 9188 保持 页 面 的 视觉 连 赏 性 和 统一 


Ei 


91-72 ” 轮 播 图 展现 形式 分 析 


在 广告 位 和 网 站 的 内 容 展示 上 ， 文 案 的 风格 直接 影响 着 用 户 的 浏览 和 决策 ， 而 对 于 迅雷 会 员 这 类 实用 派 、 功 能 化 的 产品 而 
言 ， 从 用 尸 的 使 用 场景 和 生活 需求 出 友 ， 无 疑 是 打动 用 尸 切 入 后 。 因 此 对 于 文案 的 表述 ， 我 们 重点 研究 了 生活 化 文案 的 方 同 ， 如 
图 1-73 所 示 。 


从 用 尸体 验 、 运 膏 成 本 、 视 党 效果 、 商 业 价值 (提高 扎 击 率 ) 等 多 维度 综合 衡量 ,我 们 认为 通栏 的 广告 背景 、 缩 略图 定位 的 
万 式 、 规 荡 化 的 视 党 样式 可 作为 后 续 官网 广告 位 设计 的 主要 借鉴 号 ， 而 网 站 的 文案 风格 走 生 活化 的 方向 ， 如 图 1-74 所 示 。 


文案 生活 化 


贴近 生活 ; 易于 理解 ; 易于 带 入 场景 
用 生活 中 的 真实 场景 和 语言 
切入 用 户 情 层 和 和 需求 


案例 分 析 -支付 宝 
过 付 宝 改版 后 的 首页 文案 采用 
用 户 在 实际 生 知 场景 中 的 感 甬 ， 
没有 进行 任何 包装 ， 
阅读 起 来 通俗 易 懂 更 贴近 生活 
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81-73 ”文案 表述 方式 分 析 


缩 略 图 定位 规范 定制 > BANNER 样 式 


FULL COLUMN ORIENTATION STANDARD 


图 1-74 ”会员 官网 广告 位 设计 方向 与 定位 


142 目标 转化 


1. 目 标 构建 


过 前 期 数据 分 析 可 知 ， 旧 版 会 员 官 网 的 主要 问题 在于 用 户 活跃 硫 低 、 用 户籍 性 低 ; 非 会 员 和 新 用 尸 占 比较 高 ， 但 流失 率 也 

很 高 。 造 成 这 一 问题 的 原因 包括 : 核心 内 容 缺失 或 展现 不 足 ; 对 用 户 需 求 了 解 不 足 ， 运 宫 味 过 重 ， 变 为 “广告 集散 地 ”; 缺少 以 

用 己 为 中 心 的 运营 思路 ， 推 广 万 式 强硬 且 不 易 理 解 。 ， 本 次 会 员 官 网 改版 的 目标 相当 明确 ， 短 期 目标 : 提升 官网 平台 用 户 活 
; 提高 用 户 留存 。 中 长 期 目标 : 提升 官网 流量 分 友 能 力 ， 如 图 1-75 所 示 。 


02 03 
用 户 留存 官网 流量 分 点 铝 力 
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图 1-75 ”业务 目标 


迅雷 会 员 的 入 口 和 渠道 较 多 ， 除 官网 外 ， 迅 雷 7、 迅 雷 9、 手 机 迅雷 、XMP 等 各 个 渠道 的 多 个 入 口 均 承 载 了 会 员 相 天 内 容 的 
展示 。 迅 雷 会 员 各 人 入口 存 在 如 下 问题 : 不 规范 ， 缺 少 统一 规划 和 梳理 ; 同一 渠道 的 多 个 入 口 定 位 不 清晰 ， 内 容 无 差异 ; 利用 率 较 
(6; 不 同 渠 道 的 同类 型 展示 位 内 容 不 一 致 ， 给 用 户 市 来 困扰 。 因 而 需要 对 会 员 的 所 有 渠道 和 入 口 进 行 统一 的 柄 理 和 清晰 的 定位 ， 
以 友 挥 不 同 入 口 的 价值 ， 提 升 会 员 转 化 率 ， 如 图 1-76 所 示 。 


渠道 АД 位 内 容 提 示 
头像 Hover 个 人 信息 个 人 信息 
强化 个 人 信息 及 会 员 信 息 展示 
言 息 + 会 员 信息 + 支 
通过 差异 化 引导 升级 ЛА: БИНЕ +з] 
МІРУ 突出 VIP 特权 ， 加 入 试用 引导 特权 + 试用 
ЫЙ, 
小 秘书 支付 与 活动 导 唱 的 重要 入 口 w L МИМ + ЖАЛ 
会 员 中 心 体验 一 致 性 及 品牌 焉 续 性 会 员 官网 内 嵌 
手机 迅雷 会 员 中 心 会 员 福 利 与 特权 会 只 福利 + 支付 
АМР 会 员 中 心 人 恒 验 一 纤 性 到 品牌 和 亚 冻 性 会 员 言 网 内 赃 
会 员 官 网 会 员 俱乐部 + 品牌 宣传 承载 会 员 相关 所 有 内 容 
91-76 ” 同 渠 道 会 员 入 口 定位 


基于 上 述 两 点 分 析 ， 最 终 我 们 得 到 会 员 官 网 目标 定位 ， 如 图 1-77 所 示 。 


俱乐部 多 版 本 通用 


品牌 形象 所 和 


BRAND VIP CLUB GENERAI 


2. 目 标 转 化 


官网 定位 清晰 后 ， 我 们 分 析 转 化 ， 得 到 网 站 的 运营 和 设计 目标 。 我 们 保持 设计 目标 和 运营 目标 的 高 度 一 至， 将 目标 转化 为 可 
洛 地 执行 的 设计 思路 ， 为 后 续 的 方案 设计 指明 方向 ， 如 图 1-78 所 示 。 


运 侣 /设计 目标 设计 思路 


1 培养 用 户 品 牌 忠诚 度 1 加 强 官网 品牌 宣传 及 设计 
2 提高 用 户 活 跃 及 留存 2 不 同 用 尸 类 型 达 寞 化 设计 
3 体验 一 致 性 3 通用 性 尺寸 适 配 


图 1-78 设计 目标 的 转化 


143 ”目标 导 辐 的 设计 洛 地 


(1) 官网 信息 架构 的 重新 梳理 ， 信 息 分 类 更 全 面 更 系统 ( 见 图 1-79) : 

` 导航 栏 中 去 掉 福利 特权 ， 新 增 游戏 特权 、 会 员 介绍 、 成 长 规则 、 年 党 会 员 。 
` 将 “超级 会 员 ”合并 到 “会 员 介 绍 ” 中 。 

` 迅雷 特权 优化 为 功能 特权 。 

“ 我 的 会 员 与 个 人 中 心 合并 ， 入 口 整合 到 头像 点 击 。 


. 新 增 “ 系 统 通知 ”的 消息 18. 


优化 前 


«тев 首页 。 ”迅雷 特权 ”理财 特权 。 ”福利 特权 精彩 活动 年 费 会 员 。 。 我 的 会 员 40 шә +: 53 


91-79 ”网 站 一 级 导航 架构 优化 


(2) 对 会 员 特 权 进 行 重新 梳理 与 归 类 ， 如 图 1-80 所 示 。 


局 速 下 载 
Wema, 离线 下 载 
ЕТТУ 
升级 加 速 
特 机 分 类 迅雷 快 乌 
网 施加 速 


ЖЭИЕ 


安全 特权 

账号 永存 

开通 优惠 
安全 与 其 他 

客服 优先 
ЛЯ МІРУ 22226 

VIP 生日 特权 


理财 特权 迅雷 理财 


图 1-80 ”会员 特 权 杭 理 


2. 目 标 导 加 的 设计 洛 地 
(1) АОК, АТ: 


- 首页 去 掉 理 财 、 福 利 、 游 戏 等 推广 内 容 ， 告 别 “ 广 告 集散 地 ， 只 展示 用 户 福 利 、 会 员 介绍 、 会 员 活动 等 与 会 员 强 相关 的 


内 容 ， 将 “会 员 俱乐部 ”的 定位 和 理念 传递 给 用 户 ; 


` 国 化 会 员 福 利 模 块 在 首页 展示 ， 提 升 用 户 夭 性 ， 将 所 有 与 用 户 福利 相关 的 内 容 整 合 到 一 起 ， 和 营造 趣味 性 ， 加 强 用 户 参 与 


йе 


. 严格 控制 首 屏 高 度 ， 保 证 在 第 一 屏 展示 福利 专区 的 内 容 ; 


. 根据 每 种 会 员 不 同 的 特权 内 容 、 用 户 使 用 场景 和 用 户 痛 点 ， 设 计生 活化 文 委 ， 告 别 icoh+ 文 字 的 形式 ， 以 更 自然 的 方式 打 
5) Р; 


自主 拍摄 ， 根 据 文生 搭建 场景 和 拍摄 环境 ， 请 公司 同事 现场 拍摄 〈 非 专业 模特 ) ， 以 更 真实 的 方式 展现 迅雷 生活 和 使 用 状 
态 ， 同 时 塑造 良好 的 迅雷 品牌 形象 。 


自 页 优化 前 后 的 对 比如 图 1-81 所 示 。 


£ павее 


现在 的 我 
RES ЕЕ 


ТЕ 
НВ, ЕЎ 


91-81 网 首页 改版 前 与 改版 后 对 比 


(2) Banner 位 优化 设计 ， 页 面 更 整体 更 规范 。 


` 采用 通栏 大 背景 方式 ， 增 强 页 面 整体 性 。 


-规范 化 〈 见 图 1-82) ， 底 图 背景 统一 公用 ， 素 材 、 标 题 、 按 钮 可 替换 ， 但 位 置 固定 ， 避 免 杂 乱 的 色彩 和 素材 布局 影响 页 面 


` 轮 播 采用 文字 缩 略 展示 方式 ， 用 户 可 全 局 了 解 轮 播 内 容 ， 有 效 提高 多 个 轮 播 内 容 的 曝光 。 


. 轮 播 图 文 及 缩 略 文案 根据 用 户 身 份 、 类 型 的 不 同 而 进行 差异 化 展示 ， 逐 步 实 现 精准 运营 。 缩 略 文案 分 为 新 手 专 享 、 会 员 专 
享 、 游 戏 特权 、 理 财 特权 、 迅 雷 推荐 等 内 容 模 块 ， 方 便 不 同类 型 用 户 快速 定位 ， 避 免 同 时 出 现 多 个 同类 的 广告 造成 资源 浪费 ， 同 


时 对 于 新 手 用 户 和 非 会 员 用 户 展示 新 手 专 享 活动 ， 实 现 精 准 推送 ， 提 高 转化 率 。 
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91-82 ”首页 广告 位 设计 规范 


(3) 设计 过 程 中 ， 每 一 个 重要 内 容 都 输出 了 两 套 方案 ， 经 过 反复 推敲 和 比 对 ， 让 我 们 更 加 清楚 地 找到 网 站 的 定位 和 风格 ， 
进而 确定 一 个 方案 继续 优化 ， 最 终 得 到 一 个 最 适合 的 万 案 。 取 两 个 方案 各 目的 腕 点 和 切合 点 ， 友 挥 出 1+1>2 的 价值 。 


1) 官网 视 营 风格 设计 了 A/B 两 套 方 案 : 方案 A 清新 整洁 ， 普 适 性 更 强 ; 方案 B 硬 明 个 性 ， 视 党 冲击 力 较 强 ， 如 图 1-83 所 示 。 


ВТЕ; 
ва 


Ети 
ЕР 
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2) 会 员 及 特权 场景 构思 撰写 了 A/B 两 套 文 案 : 万 案 A 走 情怀 路 线 ， 通 过 情感 和 生活 气息 打动 用 户 ; 方案 B 走 功能 路 线 ， 直 日 
地 将 不 同 会 员 的 功能 和 特权 告知 用 尸 ， 如 图 1-84 所 示 。 


场景 文案 B 设 计 
功能 ЫН 


超级 会 员 ( 核心 : еш. юш) 
超级 会 员 ， 和 而 不 同 


包 合 四 大 会 员 ,更 苯 贵 ,丰富 而 全 面 的 特权 体验 


Аата ( 核心 : РХ) 


日 金 会 员 ， 磷 的 不 是 一 局 氮 


带 给 您 极致 的 下 载体 蛤 


快 岛 会 员 ( 核心 : 所 带宽 ) 

更 有 价值 的 一 分 钟 

下 载 一 部 电影 ，1 分 钟 搞定 春运 车 票 。1 分 钟 网 网 秘 杀 
你 的 1 分 钟 ， 也 可 以 如 此 充实 


图 1-84 ”场景 文案 A/B 方 案 


3) 页 面 完 度 设 计 了 1200px 和 900px 两 个 尺寸 ， 以 完美 适 配 网 页 和 迅雷 客户 闹 ， 且 实现 了 从 1200px 到 900px 宽 度 间 自由 拉 伸 
缩放 时 的 自 适 应 ， 有 效 提 高 了 使 用 体验 。 其 中 ，900px 的 宽 页 面 如 图 1-85 所 示 。 
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01 月 22 日 


图 1-85 客户 端 庶 入 900px 宽 页 面 


(4) 运 言 闭环 引导 设计 ， 具 体 如 下 : 


1) 用 户 福 利 专区 显 性 化 展示 不 同等 级 身份 用 户 的 福利 差异 ， 引 导 用 户 开 通 或 升级 会 员 ， 包 括 日 金 会 员 打 卡 与 超级 会 
天 数 的 对 比 、 翻 拍 奖品 的 对 比 以 及 领取 红包 数额 差异 的 对 比 等 ， 如 图 1-86 所 示 。 


Со mas [о] жав с ый 


01 月 22 日 | \ 
已 连续 打卡 3 天 | 


)=ә 


ШЕШ | ЖУП ДЕ Л, ЕЕ, iPhone 65 迅雷 周边 
立即 领取 > 立即 领取 > 立即 领取 > 立即 领取 > 


91-86 不同 身份 会 员 打 卡 天 数 显 性 化 


2) 强化 当前 成 长 值 和 升级 后 成 长 值 的 显 性 化 展示 并 进行 对 比 ， 刺 激 用 户 升 级 欲望 ， 如 图 1-87 所 示 。 


з МІР68 7/25 үз т МІРБН6ОХх 


员 打卡 


图 1-87 ”成 长 值 差异 显 性 化 


3. 设 计 规范 


设计 规范 的 制定 对 于 设计 的 品牌 性 、 一 致 性 和 后 期 维护 来 说 至 关 重 要 ， 因 此 我 们 定义 了 会 员 官 网 品牌 色 ， 将 文字 、 
景 等 内 容 的 颜色 都 做 了 详细 的 规 泡 ， 如 图 1-88 所 示 。 


07 官网 品牌 红 04 主 标题 色 06 

#E31E27 强调 文案 #383838 半 规 文案 #F1F1F1 
АВФ 2} ЕН 主要 文案 

02 品牌 辅助 色 05 灰色 文案 07 

#FFC52A 按钮 、 进 度 条 #8B8B8B 文案 辅助 色 #ЕЗЕЗЕЗ 
与 品牌 红 对 应 用 于 次 要 文案 

03 文案 辅助 色 08 

#FF8A00 突出 文案 #ЕЕЕЕЕЕ 
与 品牌 红色 文案 对 应 


图 1-88 网 站 色彩 规范 


分 割 线 色 
Ж, 2% 


ЊЕ. #998! 


内 容 大 色 块 
二 级 页 面 内 容 底 框 色 


制定 了 广告 位 和 字体 排版 规 学 。 对 广告 位 的 文案 、 按 钮 和 素材 图 的 位 置 、 大 小 、 上 间距， 以 及 文案 的 多 种 排版 方式 ， 都 做 了 明 


确 和 细致 的 规定 ， 以 确保 广告 位 保持 一 致 ， 不 因 内 容 的 变化 而 杂乱 不 可 控 


144 я 


新 版 官网 上 线 后 ， 为 验证 设计 效果 ， 我 们 从 吸引 度 、 完 成 度 、 满 意 度 、 


?30PX 


— 二 


випог Ж 
RWW i X НЕ 


20PX 
无 国 与 文案 最 小 司 距 


文案 排 A 肥 遵循 以 下 规范 大 标题 字体 小 标题 字体 
1 aa 样式 调整 ЛЕТУВЕ: оп 微软 雅 黑 Regular 
2 еа, еа 


迅雷 9 PC 版 
月 20 日 以 战 之 名 
全 新 视 兄 


迅 二 理财 淫 你 赚钱 


最 局 ,3% | 破 焰 而 生 


规范 1， 小 文案 字数 较 少 时 ， 加 3PX 卉 线 两 边 对 齐 园 范 2 :logo 样 式 ， 最 多 平行 2 个 lbg 山 范 3 ， 特 殊 样式 ， 可 以 适当 增加 文案 两 度 


1 如 图 1 -89 所 示 。 


52 - 极致 583 


留存 、 推 荐 度 这 五 个 可 量化 指标 进行 分 析 ， 其 中 : 


干 万 现金 红包 
正在 友信 


27-213 土豪 和 女神 派 现金 红包 


钢 范 4 - 大 小 诺 落 对 比 


图 1-89 ”广告 位 规范 


吸引 度 -点 击 率 : 上 线 7 天 后 ， 首 页 轮 播 图 点 击 量 较 旧版 提升 40%， 点 击 率 提升 50%。 


— 
М7 


N 
— 


吸引 度 -跳出 率 : 上 线 15 日 后 ,环比 上 月 同期 旧版 数据 ， 跳 出 率 降低 了 10.48%。 


O 
— 


吸引 度 -新 增 页 转化 率 : 新 增 页 面 开通 量 效果 较 好 ， 运 言 闭环 设计 的 用 尸 转化 效果 初 见 成 效 。 


4) 完成 度 - 目 标 到 达 率 : 通过 百度 热力 图 ( 见 图 1-90) 可 以 看 出 ， 新 版 官网 首 屏 中 ，Banner 及 福利 专区 的 信息 布局 及 设计 
引导 非 党 成功， 用户 的 点 击 热点 与 信息 传达 的 引导 与 预期 匹配 度 极 高 。 


5) 留存 -次 日 留存 率 : 上 线 15 天 后 ， 次 日 留存 率 提升 了 48.5%。 


通过 EDMS 廊 法 体系 的 应 用 与 实践 ， 使 得 此 次 的 官网 改版 进行 得 更 加 有 序 和 规范 ， 每 一 步 的 进展 和 输出 都 为 设计 提供 了 强 有 
力 的 依据 ， 最 终 的 设计 方案 上 线 后 通过 数据 也 印证 了 EDMS 设 计 方 法 的 有 效 性 ,体现 了 设计 的 价值 所 在 。 


91-00 诈 页 第 一 屏 热 力图 


迅雷 页 游 从 2010 年 至 今 ， 在 不 断 打 磨 、 提 升 运营 能 力 的 同时 ， 也 越 来 越 注重 提升 产品 的 用 尸体 验 。 随 着 页 游 数 量 和 手 游 数 
量 的 增多 ， 页 游 官 网 2.0 版 本 在 后 期 新 增 了 很 多 产品 功能 ， 人 存在 承载 信息 几 余 、 扩 展 性 差 、 用 户 找 活动 和 游戏 不 方便 等 问题 ， 渐 


渐 满 足 不 了 大 量 游戏 接 入 平台 和 其 他 的 业务 需求 。 


更 符 


设计 人 员 和 项 目 运营 人 员 对 现 有 官网 存在 的 问题 进行 研究 和 分 析 ， 并 进行 用 尸 调研 以 求 更 深入 地 友 现 问题 ， 从 而 希望 
合用 户 需求 和 业务 拓展 需求 。 设 计 人 员 主 动 推动 对 官网 进行 3.0 版 本 的 升级 。 


1.52 ”整体 设计 流 


格 


各 、 重 构 技术 等 方面 制定 详细 设计 方案 ， 到 第 一 版 友 布 后 还 要 积极 跟 进 和 迭代 。 后 面 会 一 一 进 解 页 游 官 网 设计 的 这 几 个 


官网 能 


整体 的 设计 流程 如 图 1-91 所 示 。 从 设计 准备 到 共 建 目标 ， 再 到 以 设计 目标 为 导向 ， 在 官网 的 整体 架构 、 交 互 细 书 、 视 党 风 


设计 准备 到 设计 目标 的 制定 ; 从 设计 目标 到 设计 方案 的 落地 ; 再 通过 数据 、 用 尸 反 馈 等 方式 友 现 问题 、 解 决 问题 。 
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91-91 ”整体 设计 流程 


153 ”基于 用 户 研 究 构建 设计 目标 


基于 用 户 研究 的 构建 设计 目标 如 图 1-92 所 示 。 


1 2 
设计 准备 my 目标 共 奸 


Prepare design Objective to Биша 


СЕС 


调研 问卷 。 研究 报告 южыш ”定义 问题 。 ”讨论 目标 — ”确定 目标 


1. 用 户 群 
2 . 用 户 来 源 


3 . 用 户 分 类 
4. 用户 目的 


图 1-92 ”基于 用 户 研 究 构 建设 计 目 标 


前 期 的 设计 调研 分 析 如 图 1-93 所 示 。 
用 户 摸底 调研 问 郑 网 页 改版 研究 报告 
А. 分 析 、 总 结 、 输 出 | 


牛 X 负 游 用 户 摸底 调研 问卷 v1.docx 牛 X 页 游 首 页 改版 用 户 研究 报告 .pptx 
91-93 ”调研 结果 分 析 输 出 


研究 中 ， 把 全 投 用 尸 定义 为 新 玩家 ， 定 投 用 尸 定义 为 老 玩 家 。 调 查 结果 显示 ， 新 老 玩 家 用 官网 的 不 同 目的 和 行为 结果 如 图 1- 
949777. 


为 什么 会 进入 “ 牛 X ”页 游 网 站 


图 1-94 ”部 分 调研 结果 


在 “ 牛 X" 讶 网 做 过 的 行为 


全 投 定投 | 全 投 定投 
(n=1229) (п=1407) (n=1229) (п=1407) 
І | 
I 
找 游戏 /进入 游戏 "о И: > 寻找 新 的 游戏 65.4 50.9 
І 
获取 新 手 礼包 59.3 ЕШ: 
查看 /参加 活动 和 促销 信息 39.8 | 签到 50.2 Ш> 
| : 或 参加 活动 42 5:2 
随便 看 看 46.0 
| 维护 账号 信息 304 >: 
Ш 
инини бан ! 查询 游戏 ИШ 270 В 0 
I 
I 
| К | 积分 兑换 229 89 32.3 
维护 账号 信息 Ш 19.4 
| 维护 账户 信息 21.0 ИШ 225 
! — — 
充值 р 12.9 加 | 23.8 | 关注 会 员 特 权 20.8 ШШ 22: 
| 
| 充值 Эш 42.5 
进入 游戏 相关 论坛 [| 10.7 M 187 | 
И 提取 返 现 В 26.0 
І 
找 客服 反馈 问题 | s. l vu | 找 客服 反馈 问题 ЕЕ 
| | 
| 


数据 显示 : 定投 用 尸 进入 “和 牛 X ”的 目的 为 登录 后 进入 游戏 、 了 解 游戏 资料 和 活动 信息 。 但 全 投 用 户 为 有 目的 地 找 游戏 和 无 
目的 地 随便 看 看 。 


全 投 用 尸 进入 “ 牛 X” 官 网 的 主要 行为 以 寻找 新 游戏 或 者 获取 新 手 礼 包 为 主 ， 而 定投 用 尸 多 以 进入 游戏 、 签 到 和 找 活动 资讯 
为 主 。 而 定投 用 户 会 因 充 值 、 售 后 等 因素 持续 进入 。 


调研 中 ， 用 尸 对 之 前 官网 反馈 问题 和 期 望 如 图 1-95 所 示 。 


文字 色 看 不 清 


登录 后 首页 清 自己 不 知道 哪些 网 页 颜色 希望 
无 法 签到 游戏 的 活动 ”是 精品 游戏 清新 一 些 


期 望 多 些 福 利 
活动 


图 1-95 用户 的 问题 与 期 望 池 


上 归纳 忌 结 用 尸 期 望 的 官网 如 图 1-96 所 示 。 


等 到 、 快 速 
进入 游戏 


找到 精品 


图 1-96 ”用 户 期 望 的 官网 关键 词 


通过 用 户 调 研 ， 确 认 用 户 来 官网 的 目标 和 行为 ， 分 析 用 户 反 馈 问 题 和 期 性 ， 经 过 讨论 、 柄 理 、 上 总结， 我 们 确定 了 官网 的 改版 


目标 ， 如 图 1-97 所 示 。 


设计 目标 
1. 提升 PV UV 
2. 降低 跳出 率 
3. 提升 新 老 用 户 的 满意 度 


+ 


整体 方案 
1. 调整 官网 整体 框架 ， 重 新 梳理 页 面 交 和 互 ， 使 结构 清晰 、 内 容 宪 出 
2. 改善 考 用 户 快速 进入 游戏 、 快 速 找到 活动 、 开 服 资讯 等 体验 
3. 改善 新 用 户 找 游戏 等 体验 ， 营 造 热 闹 的 游戏 氛围 ， 精 品 游戏 中 线 推 荐 


图 1-97 ”整体 设计 方案 的 方向 推导 


1.54 ”由 设计 目标 确定 设计 方案 


根据 设计 目标 制定 的 方案 如 图 1-98 所 示 。 


2 3 
目标 共 寻 ко} 设计 方案 
Objective to build Design scheme 


搜集 问题 定义 问题 讨论 目标 确定 目标 


详细 方案 


整体 结构 细节 优化 


1. banner 规 范 


图 1-98 根据 设计 目标 制定 设计 方案 


达成 一 致 的 设计 目标 ， 设 计 师 在 交互 、 视 葛 、 重 构 三 方 都 做 了 努力 ， 如 图 1-99 所 示 。 


={ 


Ер KHE2E ， 
ЕТТЕ 22 E , 
{БЕ УД = ШТ. 内 容 


1. 整 体 结构 的 优化 


(1) 首页 优化 一 一 结构 简洁 、 视 总 清新 


香 名 建筑 师 弗 三 兄 兰 里 曾经 说 过 : “建筑 设计 应 当 抱 有 与 科学 研究 相同 的 态度 ， 即 破旧 立新 ， 而 不 是 对 固有 观念 的 重复 。 


目标 二 
改善 者 用 尸 快速 进入 


游戏 、 快速 找 至 | 活动 


开 服 人 资讯 等 体验 


图 1-99 ”整体 的 设计 目标 


目标 二 


РУТ УХА 
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”此 万 法 常 运用 到 交互 设计 中 ， 即 打破 原来 设计 框架 的 固定 模式 ， 重 新 进行 梳理 ， 使 区 域 合理 、 脉 络 清晰 、 人 逻辑 清楚 。 


对 于 官网 的 首页 ， 我 们 提炼 出 的 内 容 为 导航 、 轮 播 广告 、 登 录 、 新 开 区 服 、 


交互 界面 中 去 掉 宛 余 信息 ， 精 简 为 通栏 


视 党 方面 ， 从 凝重 风格 改 成 小 清新 的 风格 ， 
(2) 原 “ 我 的 地 盘 ” 页 升级 为 “个 人 中 心 ” 


为 登录 的 老 玩家 找到 归属 感 ， 让 用 户 可 在 


更 突出 游戏 宣传 的 内 容 ， 


' 个 人 中 心 


结构 ， 使 视 竞 沅 由 上 到 下 更 顺畅 、 


的 模块 : 我 的 游戏 、 我 的 积分 、 我 的 奖品 、 我 的 消息 。 后 期 可 扩展 账号 安全 、 


如 图 1-101 所 示 。 


页 查找 到 所 有 与 个 人 相关 的 信息 和 资讯 。 将 “个 人 中 心 ” 


、 洲 戏 推荐 。 


清晰 ， 如 图 1-100 所 示 。 


页 扩展 成 新 
管理 我 的 地 址 等 新 模块 ， 如 图 1-102 所 示 。 
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91-100 页 结构 简化 前 后 对 比 
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图 1-101 页 整体 风格 前 后 对 比 


游戏 列表 


(s) 我 的 积分 


我 的 奖品 


ka 


图 1-102 ”个 人 中 心 导 航 
(3) 新 增 “ 游 戏 大 厅 ” 


原 首 页 的 “全 部 游戏 ”模块 砍 挥 ， 成 立 单独 的 分 页 
推荐 模块 中 都 有 进入 游戏 大 厅 的 入 口 。 


“游戏 大 厅 ”。 在 “游戏 大 厅 ” 首 页 只 显示 部 分 游戏 ， 各 个 游戏 的 
随 看 平台 游戏 数量 的 增多 ， 首 页 模块 已 经 很 难 承载 所 有 游戏 的 功能 ， 故 需 另 辟 蹊 径 ， 即 新 增 游戏 大 厅 ， 并 增加 游戏 的 分 类 ， 
使 玩家 找 游 戏 更 方便 ， 如 图 1-103 所 示 。 
(4) 活动 专区 优化 
活动 专区 采用 了 时 间 轴 的 交 互 万 式 ， 市 有 情感 化 设计 元 素 ， 并 优化 体验 。 
(5) 屏幕 尺寸 的 响应 式 设 计 


根据 显示 器 屏幕 的 大 小 ， 我 们 重 构 了 两 个 尺寸 的 响应 式 设 计 : 960px 和 1200px ( 见 图 1-104) ， 以 满足 不 同 界面 尺寸 的 需 
求 。 大 尺寸 用 尸 界 面 可 呈现 更 多 的 游戏 和 广告 推广 内 容 ， 同 时 使 整个 页 面 更 大 气 ， 内 容 更 丰富 。 
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图 1-103 


图 1-104 


响应 式 尺 二 


2. 优 化 老 玩家 的 体验 


围绕 3 点 为 老 玩家 体验 优化 的 目标 ,我们 进行 了 功能 和 细节 的 交互 体验 优化 ， 如 图 1-105 所 示 。 


1) 登录 后 ， 在 首页 的 个 人 信息 模块 中 增加 活动 、 开 服 、 礼 包 三 个 信息 和 快速 查看 入 口 ， 如 图 1-106 所 示 。 


省 玩家 来 官网 的 目的 设计 目标 


Ф 快速 游戏 入 口 
Ө 快速 定位 游戏 活动 资讯 
Ө 快速 找到 服务 


Ф 进入 游戏 
© 查看 自己 游戏 活动 资讯 
Ө 找 服务 ( 充值 、 售 后 等 ) 


91-105 老 玩 家 来 官网 的 目的 与 设计 目标 
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91-106 首页 个 人 信息 模块 快速 入 口 


2) 我 的 游戏 中 增加 最 新 开 服 特殊 标记 ， 方 便 老 玩家 快速 进入 目 己 玩 过 的 游戏 的 新 开 区 服 ， 如 图 1-107 所 示 。 
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91-107 我 的 游戏 最 新 开 服 特殊 标记 


3) 在 活动 区 域 ， 对 我 的 游戏 、 平 台 活 动 做 了 特殊 标记 ， 方 便 玩家 快速 找到 可 参与 的 活动 ， 如 图 1-108 所 示 。 


кшз; 


仙 侠 道 拿 大 礼品 抢 会 员 仙 侠 道 拿 大 礼品 抢 会 员 暗黑 之 光 领 会 员 拿 奖励 


奖品 :迅雷 ' 牛 X” 金 钻 迅雷 白金 会 员 卡 等 。 ”奖品 :迅雷 " 牛 X” 金 外 迅雷 白金 会 员 卡 等 。 ”奖品 :2000 元 宝 “ 牛 X” 金 外 迅雷 会 员 等 
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图 1-108 ”活动 特殊 标记 


4) “个 人 中 心 ” 是 原 “ 我 的 地 盘 ” 的 升级 ， 为 登录 的 老 玩 家 服务 。 在 个 人 中 心 可 以 找到 所 有 与 个 人 相关 的 信息 : 我 的 游 
戏 、 我 的 积分 、 我 的 奖品 、 我 的 消息 等 ， 这 在 整体 结构 优化 中 已 说 明 。 


5) 活动 专区 采用 了 时 间 轴 交互 的 方式 、 情 感化 设计 并 优化 了 体验 ， 如 图 1-109 所 示 。 


| 精彩 活动 ss в maska 


па донан: Рае) Ви | 一 一 一 一 一 @ 6 月 20 昌 开局 
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Мад), ТЕТБШТИ ШЕ ЫЛ, САЕН ЫЛ, АУБ 
的 颜色 、 活 动 状态 图 标 和 像素 的 角 标 都 做 了 明显 区 分 


81-109 ”精彩 活动 时 间 轴 设计 
3. 优 化 新 玩家 体验 


新 玩家 来 官网 的 目的 和 设计 目标 如 图 1-110 所 示 。 


新 玩家 来 官网 的 目的 тин 
© 改善 新 玩家 找 游戏 体验 
© 改善 领取 礼包 体验 

Ө 精品 游戏 推广 吸引 眼球 


@ 找 游戏 
© 获 新 手 礼 包 
@ 随便 看 看 


图 1-110 官网 的 目的 与 设计 目标 


Т) 新 增 搜 索 游戏 和 游戏 大 厅 ， 方 便 新 玩家 快速 查找 游戏 ， 如 图 1-111 所 示 。 


图 1-111 搜索 


2) 根据 调研 报告 得 到 的 用 户 强 烈 需 求 ， 在 游戏 筛选 中 增加 了 .上手 度 难 易 的 筛选 项 ， 满 足 新 老 玩家 根据 上 手 难 易 来 筛选 游 
戏 ， 如 图 1-112 所 示 。 
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图 1-112 上手 度 难 易 的 筛选 


3) 在 洲 戏 大 厅 中 增加 小 型 测试 题 ， 根 据 测试 结果 精准 推荐 给 玩家 合适 的 游戏 ， 如 图 1-113 所 示 。 


图 1-113 ”游戏 测 试题 


4. 规 沁 化 设计 


此 外 ， 我 们 对 Banner、 活 动 素 材 也 进行 了 规范 化 设计 。 规 范 化 设计 既 可 以 减少 制作 成 本 ， 也 可 以 控制 页 面 的 统一 性 ， 使 广 
告 能 更 好 地 融入 内 容 。 规 范 化 设计 示例 如 图 1-114 所 示 。 


1.5.5 ”解决 问题 快速 迭代 


从 设计 方案 到 运 代 优化 的 过 程 如 图 1-115 所 示 。 


主题 区 域 
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АПА: : 从 上 至 下 


图 片 尺寸 ; 226x179px 
图 片 显示 内 容 ; 角色 宣传 图 、 游 戏 LQGO、 活 动 内 容 
活动 内 容 介绍 区 : 226 x 80px ( 文字 两 行 排版 、 上 大 下 小 | 
活动 角 标 类 型 ; 1. 参 与 人 数 角 标 

2. 平 台 活 动 角 标 

3. 我 的 游戏 角 标 


活动 内 容 介绍 区 


图 1-114 Banner 与 卡片 规范 


4 
设计 方案 = 迁 代 优化 


Design scheme [terative optimization 


整体 结构 细 太 优化 设计 规范 


问题 分 析 夺 代 目标 ж 


1. 交互 框架 1. 用 户 群 
2. 视 吕 表现 2. 用 户 来 源 


1. banner 规 范 
2. 活动 素材 规范 


问题 分 析 1. 交互 优化 


2. 视觉 优化 


3. 重 构 实现 3. 用 户 分 类 
4. 用户 目 的 
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1. 优 化 目标 


3.0 上 线 后 用 户 体 验 有 极 大 的 提升 ， 在 上 线 后 的 一 个 星期 ， 网 站 PV、UV、1P 访 问 数 都 突破 纪录 ， 但 也 存在 一 些 问题 。 根 据 
数据 结果 和 各 方面 的 反馈 意 凡 ， 我 们 重新 梳理 了 一 下 目前 存在 的 所 有 问题 。 


针对 首页 热力 图 和 点 击 率 的 数据 分 析 ， 我 们 输出 了 两 份 报告 : 一 份 为 3.0 问 题 的 分 析 、 一 份 为 3.1 优 化 方案 。 
对 首页 整体 与 各 个 模块 的 问题 进行 分 析 并 提出 解决 方案 ， 进 而 规划 了 3.1 首 页 的 版 本 优化 。 

归纳 出 3.0 版 百 页 总 体 存 在 以 下 问题 : 

1) 忌 体 热 力图 的 点 击 区 域 有 些 分 散 ， 出 现 第 二 屏 推荐 游戏 的 点 击 率 反 而 比 第 一 屏 活动 点 击 率 更 高 的 情况 。 
2) 页 面 整体 缺少 一 些 灵 动 的 表现 力 ， 整 个 页 面 游戏 氛围 不 够 活跃。 

3) 秆 页 游戏 推荐 的 内 容 需要 再 丰富 一 些 。 


4) 很 多 游戏 重复 推荐 ， 轮 播 图 、 本 周 推荐 、 热 门 游戏 和 顶部 广告 位 、 对 联 广告 位 推荐 的 游戏 很 多 都 是 重复 的 ， 使 整个 页 面 
有 效 推荐 游戏 的 数量 变 少 。 


3.1 版 优化 的 目标 : 
1) 丰富 游戏 推荐 的 形式 和 内 容 ， 增 加 首页 的 点 击 区 域 和 点 击 量 。 
2) 增强 游戏 的 氛围 ， 使 首页 热 | 用、 灵动 起 来 。 


2. 优 化 方案 


如 果 说 3.0 版 用 心 优化 了 用 尸体 验 ， 那 么 3.1 版 则 是 情感 化 设计 的 极致 友 挥 。 


3.0 版 友 布 后 获得 了 很 多 好 评 ， 但 还 存在 一 些 问题 ， 很 多 用 户 和 项 目 组 成 员 都 给 出 了 很 多 修改 优化 意见 。 


我 们 曾经 为 迅雷 7 下 载 做 了 极速 版 ， 为 加 速 器 的 客 尸 端 做 了 极 简 版 ， 为 尊 享 版 做 了 简洁 版 ， 这 些 改善 都 得 到 了 用 户 的 好 评 ， 
但 这 些 都 属于 客户 端 软件 的 设计 定位 ， 简 洁 、 易 用 。 可 是 ， 这 里 是 一 个 游戏 平台 官网 ， 属 于 娱乐 性 质 的 ， 内 容 的 丰富 和 洲 戏 的 氛 
围 尤 其 重要 ， 否 则 用 户 束 少 了 操 击 欲 。 


(1) 激 友 玩 家 的 情感 一 一 将 游戏 内 的 气氛 市 到 页 面 中 来 


为 了 烘托 游戏 的 氛围 ， 把 游戏 里 的 内 容 展现 到 网 页 中 来 ， 让 人 在 网 页 上 残 能 感受 到 游戏 内 的 活跃 气氛 和 欢乐 景象 ， 可 进行 如 
下 优化 : 友 布 玩家 参与 活动 获得 奖励 的 深 动 公告 、 显 示 每 个 活动 实时 的 参与 人 数 、 友 布 某 玩 家 进入 某 六 戏 的 滚动 公告 等 ， 如 图 1- 
116 所 泵 。 
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91-116 游戏 的 氛围 感 


(2) 设计 的 情感 一 一 音乐 的 灵感 


3.1 版 本 市 有 创作 音乐 的 元 素 。 假 设 音乐 的 主旋律 是 轻松 愉悦 、 年 轻 活 泼 的 ， 音 乐 的 前 奏 融 会 把 人 市 入 表达 情感 的 氛围 ; P 
滑 是 让 人 留 下 深刻 印象 的 部 分 ， 也 许 你 筷 记 前 奏 ， 筷 记 了 结尾 ,但 让 人 难以 志 怀 的 思 是 高 潮 部 分 的 经 典 ，| 肝 时 也 可 哼 上 两 句 。 美 
好 的 音乐 总 有 收尾 ， 但 不 会 唐 突 ， 会 让 人 在 意料 之 中 ， 收 尾 的 那 句 或 许 会 绕 几 个 音 ， 延 上 好 几 担 。 


顶部 轮 播 图 和 今日 开 服 列 表 融 为 一 体 ， 开 服 区 域 的 轮 播 高 斯 模糊 加 渐变 的 效果 使 游戏 氛围 一 下 在 首 屏 第 一 印象 就 改善 很 多 ， 
也 不 会 让 文字 区 域 凌乱 。 开 服 区 域 右 侧 增 加 火爆 区 服 推荐 ， 使 开 服 表现 形式 多 样 化 ， 可 将 没有 目的 的 玩家 注意 力 拉 到 火爆 区 服 上 
来 ， 增 加 网 页 右 侧 的 点 击 率 。Banner 如 图 1-117 所 示 。 


将 热 半 的 活动 、 深 动 的 公告 和 参与 人 数 显 示 在 首 屏 ， 可 呈现 出 热 几 的、 玩家 积极 参与 的 景象 ,活动 的 奖励 都 展现 出 来 会 增加 
玩家 的 点 击 欲 ， 如 图 1-118 所 示 。 


本 周 推荐 中 游戏 的 视频 把 首页 推 到 了 高 潮 ， 这 突破 了 传统 用 图 片 和 文字 的 表达 形式 。 用 视频 播放 的 形式 展现 ， 更 加 生动 和 活 
跃 。 
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图 1-118 ”卡片 与 滚动 活动 公告 


图 片 表达 胜 过 文字 ， 视 频 表达 更 胜 过 图 片 。 也 许 你 会 志 记 了 整个 网 页 的 设计 ， 但 在 这 个 网 页 里 播放 过 的 游戏 视频 ， 相 信 一 定 
会 给 你 留 下 印象 。 


在 所 有 同类 游戏 平台 官网 设计 中 ， 游 戏 推荐 部 分 放置 游戏 视频 ， 这 是 首创 ， 如 图 1-119 所 示 。 


“ „эмей - ‚гъ , — 
| 本 周 推 荐 %: іла: `blgbang ТОР" ЖНА У Еру ешн [ЫНЧА T 


а: 大 天 使 之 剖 
推荐 理由 : 一 款 西 方 魔幻 题材 ARPG 网 页 游戏 .十 年 经 典 , 追 忆 蔡 日 兄弟 六 戏 , 重 磅 回 肯 ， 
戏 引 擎 打造 ， 采 用 即时 战斗 的 游戏 方式 ,精美 画 风 、 酮 炫 特效 ， 同 时 持 . 
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91-119 本 周游 戏 推 荐 


首页 底部 慢 慢 平缓 ， 从 牛 友 推 荐 到 更 多 类 别 游 戏 ， 展 现形 式 多 样 、 表 达 丰 富 。 收 尾 是 几 个 热门 游戏 的 小 轮 播 ， 和 头 部 首尾 呼 
应 ， 如 图 1-120 所 示 。 


| 更 多 游戏 
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图 1-120 尾部 


此 外 ， 首 页 把 所 有 按钮 的 热 区 扩大 为 整个 卡片 ， 只 要 妃 标 的 光标 在 hover 卡 片 的 任意 一 处 边 绿 ， 按 钮 即 亮 ， 也 束 是 可 以 点 击 
进入 六 戏 ， 如 图 1-121 所 示 。 


仙 侠 道 拿 大 礼品 抢 会 员 
奖品 : 迅雷 牛 X 金 钻 迅雷 白金 会 员 卡 S 


81-121 热 区 扩大 


经 过 后 期 的 迭代 优化 ， 给 新 老 玩家 不 一 样 的 畅快 体验 。 优 化 后 首页 融入 了 游戏 的 氛围 和 情感 设计 ， 无 论 是 整体 效果 ， 还 是 细 
节 ， 都 给 人 焕然 一 新 的 感 况 ， 如 图 1-122 所 示 。 


1.5.6 项目 成 果 


1. 数 据 成 果 


官网 上 线 前 后 20 天 对 比 ，PV 均 值 提升 46%，UV 均 值 提升 16%， 首 页 跳出 率 降低 5%。 
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图 1-122 ”3.0 首页 整体 效果 预览 图 


2. 用 户 反馈 


通过 对 官网 2.0 与 3.0 版 的 问卷 调查， 得 出 用 户 整体 满意 度 由 原来 的 62% 提 升 全 80%， 如 图 1-123 所 示 。 


评论 口碑 趋势 图 评论 口碑 趋势 词 频 


数据 来 源 : EXP 平 台 管家 & 体 验 版 用 户 


/8.4% 简洁 /直接 /简单 /简约 

清 更 /清楚 /干净 /清晰 /整洁 

快 /流畅 / 误 

慢 / 卡 

美观 /漂亮 /大 气 /精致 

难 找 / 没 看 到 / 找 不 到 

难看 / 丑 / 乱 / 碍 眼 

慢 6.2% 0: 死机 /假死 
еә 美观 5.8% 不 好 

难 找 4.9% 9 实用 
难看 2.9% @ іна зады 
@ 强大 1.8% 强大 /强悍 

эл. 2.7% @ Ф 方便 18x 麻烦 /烦人 /频繁 
不 好 2.4% @ Ф єк 1.2% 舒服 /舒适 
R13% SO ө ө 独特 1.1% 复杂 /混乱 

复杂 1.1% | 独特 /特别 


图 1-123 ”反馈 


1.6 ”EDMS 方 法 体系 总 结 


本 草 我 们 学 习 了 关于 EDMS 体 系 的 知识 ， 并 通过 案例 实践 把 体验 设计 的 五 个 层级 (战略 屋 、 范 围 层 、 结 构 层 、 框 架 层 、 表 现 
Е) 从 抽象 到 具体 实践 〈 设 计 准备 、 设 计 目 标 、 设 计 方案 、 设 计 验 证 ) 逐步 展现 。 由 案例 中 所 述 最 终 效果 我 们 可 以 看 出 ，EMDs 
万 法 体系 对 于 我 们 设计 团队 的 帮助 是 非常 大 的 ， 除 了 对 业务 的 帮助 之 外 ， 也 对 我 们 专业 能 力 提 升 起 了 非常 大 的 促进 作用 。 设 计 师 
在 运用 EDMS 体 系 时 会 更 关注 数据 、 天 注 产 品 体验 、 关 注 业 务 目标 ， 促 使 设计 师 主动 去 做 沟通 ， 一步 步 把 产品 体验 做 好 ， 设 计 师 
的 价值 得 到 了 最 大 化 发 挥 。 大 家 还 可 以 根据 自身 产品 和 公司 对 EDMS 体 系 进行 调整 和 优化 ， 把 它 变 成 自己 团队 的 设计 体系 。 体 系 
并 不 是 固定 的 ， 思 路 是 开阔 的 ， 做 好 产品 体验 ， 从 而 提升 业务 价值 ， 提 升 目 我 专业 能 力 ， 是 我 们 最 终 的 目标 。 


第 2 草 ”运营 设计 


2.1 互联 网 运 品 设计 分 类 与 特 岂 


互联 网 公司 里 一 般 都 有 产品 、 运 营 、 技 术 、 设 计 、 测 试 这 几 个 岗位 。 我 曾经 问 过 运营 同事 一 个 问题 : “你 们 运营 到 底 做 什 
Z? 能 不 能 简单 概述 一 下 ? ” 那 位 同事 很 简单 明了 地 回答 说 : “运作 与 萤 收 。” 运作 一 个 产品 ， 对 产品 负 有 拉 新 、 留 存 、 促 活 的 
责任 。 拉 新 ， 为 产品 市 来 新 用 户 或 流量 ， 通 单 用 话题 事件 宫 销 ， 或 者 通过 微 博 、 微 信 、3EO、3SEM 等 手段 去 实现 ; 留 仔 ， 留 住 
用 户 ， 让 用 户 留 下 来 真正 去 使 用 ， 关 注 数 据 方面 的 留存 率 ， 如 次 日 留存 率 、 七 日 留 仓 率 等 ; 促 活 ， 让 用 户 愿 意 频 每 与 你 及 生 连 
接 ， 通 过 数据 分 析 用 尸 喜 好 ， 抓 住 其 痛 点 增加 夭 性 ， 可 以 用 等 级 设置 、 激 励 体 系 等 提升 长 期 活跃 度 。 营 收 不 言 而 噜 ， 通 过 这 些 ) 
作 手 段 达 到 实现 产品 商业 价值 的 目的 。 
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` 产品 运营 : 根据 公司 的 战略 方向 与 产品 潜在 用 户 的 具体 需求 ， 策 划 产 品 功 能 与 玩法 ， 并 推动 产品 功能 与 玩法 的 落地 实施 ， 
提升 用 户 体 验 与 产品 价值 ， 并 监控 产品 数据 ， 通 过 数据 反馈 迭代 优化 产品 。 


. 活动 运营 : 顾名思义 ， 比 如 在 双 11、 双 12、 京 东 的 618 等 ， 都 会 看 到 铺天盖地 的 电 商 促销 活动 ， 迅 雷 也 会 在 各 种 节日 ， 比 
如 会 员 周 年 庆 、 春 节 、 双 11 等 节日 ， 策 划 设 计 很 多 运营 活动 ， 通 过 送礼 促销 等 方式 ， 给 用 户 带 来 优惠 与 回馈 ， 演 染 节 日 氛围。 


` 品牌 运营 : 品牌 运营 是 指 企业 利用 品牌 这 一 最 重要 的 无 形 资本 ， 在 塑造 品牌 形象 的 基础 上 ， 发 挥 品牌 更 大 影响 力 ， 促 进 产 
品 的 生产 经 营 ， 使 品牌 资产 有 形 化 ， 实 现 企业 长 期 发 展 和 企业 价值 增值 。 


` 推广 运营 : 通过 微 博 、 微 信 、 设 计 话 题 、H5 页 面 对 产 品 进 行 推广 和 传播 ， 包 括 策划 、 选 题 、 执 行 、 推 广 等 环节 。 优 范 的 
运营 必须 掌握 行业 资讯 和 新 闻 热 点 ， 不 断 研究 有 效 且 新 颖 的 运营 手段 与 推广 模式 。 


与 互联 网 运营 对 应 的 设计 可 以 分 为 产品 运营 设计 、 活 动 运营 设计 、 品 牌 运 营 设 计 、 推 广 运 营 设 计 等 几 个 大 类 。 


产品 运营 设计 的 目的 是 在 有 限 的 时 间 内 ， 给 用 己 最 有 价值 的 信息 ， 从 而 实现 商业 转化 。 


是 


一 个 长 期 的 、 不 断 迭 代 优 化 的 过 程 。 第 1 章 中 提 到 的 几 个 案例 ， 包 括 迅雷 9、 手 机 迅雷 、 迅 
会 员 官 网 等 ， 都 属于 产品 运 萌 设计。 产品 运 萌 设计 有 很 多 特点 ， 比 较 重 要 的 有 以 下 三 个 : 
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1. 通 过 对 产品 的 用 户 研究 与 数据 分 析 不 断 优化 产品 设计 


除了 第 1 章 中 的 案例 ， 我 们 再 举 一 个 迅雷 网 游 加 速 器 官网 设计 的 小 案例 ， 通 过 对 用 户 的 研究 和 对 后 台 用 户 来 源 数据 、 搜 索 天 
键 子 的 分 析 ， 针 对 不 同 的 用 户 ， 呈 现 不 同 的 页 面 。 


(1) РЯ 
用 尸 从 不 了 解 到 接触 ， 表 到 熟悉 一 个 互联 网 产品 ， 通 常会 有 一 系列 的 角色 转化 。 
迅雷 网 游 加 速 器 官网 的 用 户 角 色 有 着 图 2-1 所 示 的 转化 过 程 。 


在 角色 转变 过 程 包含 的 几 个 节点 中 ， 我 们 对 用 户 属 性 、 行 为 预期 及 设计 目标 进行 分 析 ， 如 图 2-2 所 示 。 


地 


百度 部 分 ， 


类 型 А. 

通过 搜索 引擎 (精准 搜索 ) 或 推广 
页 等 方式 , 淮 备 选择 一 球 或 者 确定 
是 否 下 载 并 使 用 迅雷 网 游 加 速 器 
用 户 属性 ， 

， 没有 使 用 加 速 器 客户 端 


иса 
。 不 是 会 员 


用 户 的 行为 预期 : 

找到 一 球 好 的 网 游 加 建 般 (可 能 通 
过 比较 速度 、 价 格 、 美 观 、 资 源 占 
用 等 条 件 ) 

我 们 的 设计 目标 : 

- ИТЕ РЗ 


“ 为 会 员 页 导 流 


对 于 类 型 A 的 用 尸 ， 最 重要 的 信息 丈 是 客 尸 端的 介绍 信息 ， 


图 2-1 用 户 角 色 转 化 


类 型 В. 

通过 推广 得 知 活 动 、 礼 包 等 优惠 

内 容 ， 或 者 在 下 载 客 户 端 后 有 进 

一 步 的 需求 

用 万 属性 : 

` ЛЖ йт Р! ЛИ Г? 

НЖЖ Р 80 Ауа (% 
费 加 速 开 通 后 还 会 有 免费 会 员 ) 

用 户 的 行为 预期 : 

- 获得 更 完整 的 加 速 体验 


我 们 的 设计 目标 : 
”教育 用 户 会 员 价 但 ， 芭 励 消费 
”展示 活动 /礼包 ， 误 励 消费 


92-2 ”用户 研究 


以 及 一 个 明确 的 下 载 按钮 。 


类 型 С. 
认可 加 速 器 会 员 及 官网 活动 礼包 
体验 ,并 且 主 动 寻求 会 员 价 值 


用 户 属性 : 
` 加 速 黄 客户 端 用 户 
”付费 会 员 


用 户 的 行为 预期 : 

“参与 /获得 更 多 的 会 员 活 动 ， 
礼包 

， 获得 会 员 等 级 的 成 长 

我 们 的 设计 目标 : 

。 精准 并 清晰 展示 会 员 增值 内 容 

”通过 成 长 体系 增加 用 户 黏 性 


需要 在 首 屏 展现 价值 并 鼓励 用 己 下 


而 对 于 类 型 B 和 类 型 C 的 用 尸 ， 网 洲 加 速 器 客户 端的 价值 介绍 及 其 下 载 入 口 意 义 不 大 。 首 屏 应 通过 活动 、 礼 包 推广 来 展示 会 
员 价值 ， 协 助 用 户 使 用 成 长 体系 ， 帮 助 用 户 管理 和 使 用 会 员 功 能 。 


(2) 后 台数 据 分 析 


根据 迅雷 网 游 加 速 器 官网 后 台 的 数据 统计 ， 用 尸 的 访问 来 源 如 图 2-3 所 示 : 来 和 目 搜索 引擎 的 上 了 近 一 半 ， 奋 加 上 外 部 链接 的 


已 经 过 半 。 其 余 是 活动 页 来 源 及 直接 访问 ， 


而 搜索 天 键 词 绝 大 多 数 都 是 精准 搜索 。 排 名 前 十 的 搜索 关键 词 如 图 2-4 所 示 。 


(直接 访问 一 般 是 老 用 尸 输入 网 址 或 通过 书签 访问 ) 。 


搜索 关键 词 的 精准 性 说 明 来 访 用 户 对 迅雷 网 游 加 速 器 已 经 有 一 定 的 了 解 ， 有 着 较 强 的 下 载 需求 或 是 准备 参考 比较 。 


结合 前 面 的 用 户 分 析 ， 针 对 用 户 类 型 A 和 用 户 类 型 B、C， 将 加 速 器 官网 拆 分 成 两 个 部 分 。 


活动 页 访问 和 4 
直接 访问 À 


一 外 部 链接 


ЕЕ 


图 2-3 用户 访 问 来 源 
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图 2-4 ”用 户 搜索 关键 词 


我 们 将 A 类 用 户 定义 为 新 用 户 ， 他 们 的 行为 预期 是 找到 一 寺 好 的 网 游 加 速 器 ， (可 能 通过 比较 速度 、 价 格 、 美 观 、 资 源 占用 
等 条 件 ) ， 我 们 设计 了 会 员 官 网 的 前 置 员 ， 如 图 2-5 所 示 。 


活动 专区 (@ emo 帮助 指导 (ж) 进入 家 网 


图 2-5 ”对 类 型 A 设 计 的 官网 前 置 页 


前 置 页 的 设计 使 新 用 户 搜索 加 速 器 到 达 的 结果 更 符合 预期 ， 前 置 首 页 信息 非 单 简单 ， 展 示 加 速 器 的 产品 形象 及 客户 端 下 载 信 
， 并 给 欲 进一步 了 解 的 用 户 以 不 同 的 入 口 。 


ell], 


而 对 于 类 型 B 和 类 型 C 的 老 用 户 ， 客 户 端的 价值 及 其 下 载 入 口 意义 不 大 。 合 理 展 示 包 括 会 员 教 育 、 活 动 展示 、 热 门 礼 包 等 内 
容 ， 让 付费 会 员 与 未 付费 的 免费 体验 的 用 户 对 消费 后 的 体验 有 深刻 且 正 面 的 预期 ， 如 图 2-6 所 示 。 


ү 


根据 前 置 官网 热力 图 及 点 击 率 统计 显示 ， 客 尸 端 下 载 按钮 43% 的 点 击 率 证 明了 前 置 员 和 官网 首页 分 离 的 成 功 。 
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图 2-6 ”为 类 型 B 和 类 型 C 设 计 的 官网 首页 


2. 塑 造 符合 “产品 定位 ”的 交互 与 视 帝 风格 


= 


“ 严 品 定位 ”这 个 概念 是 在 1972 年 由 阿尔 :里 斯 与 杰克 - 特 鲁 特 提出 并 快速 普及 的 。 定 位 并 不 是 指 产品 本 身 ， 而 是 指 产 品 要 塑 
造 一 种 在 用 户 心 目 中 的 印象 与 用 途 。 每 个 产品 都 有 目 己 特定 的 属性 和 功能 ， 产 品 定位 不 一 样 ， 目 标 人 和 群 残 不 一 样 ， 产 品 设计 的 气 
质 也 融 不 一 样 。 设 计 要 塑造 符合 产品 定位 的 交互 与 视觉 风格 。Mac 和 迅雷 2.0 的 风格 如 图 2-7 所 示 。 


迅雷 
十 Iz 


Бу [lol 电影 天 堂 www:.Ioldytt.com】 闪 电 ,….E21. 中 英 字 幕 .HDTVrip.1024X576.mp4 
к 

m; [阳光 电影 wwwygdy8.com]. 绝 地 逃亡 .HD.720p. 国 语 中 字 .rmvb 

rit 


E, [阳光 电影 wwwygdy8,comJj, 爱 丽 冀 梦 ,.. 镜 中 奇遇 记 .HD.720p. 中 英 双 字幕 .rmvb 


> [迅雷 下 载 www.2tu.cc] 两 杆 太 烟 枪 .BD 中 英 双 字 1024 高 清 .mkwv 


图 2-7 ”Mac 迅雷 2.0 


Mac 迅 雷 3.0 的 产品 定位 由 单一 的 下 载 工具 转变 为 “ 找 + 下 + 看 ”一 体 的 视频 消费 工具 ， 回 资源 下 载 的 上 游 和 下 游 (资源 友 现 
和 资源 消费 ) 探索 。 


结合 产品 定位 ， 反 观 旧版 本 Mac 迅 雷 2.0 的 不 足 : 


1) 左右 导航 结构 对 右 侧 内 容 的 拓展 有 所 限制 。 在 尝试 了 多 种 万 案 之 后 ， 友 现 有 限 的 客 尸 端 尺寸 与 较 大 的 内 容 展 示 区 域 在 空 
间 比 例 上 和 视 竞 协调 性 上 有 着 难以 调和 的 矛盾 。 


2) 左 侧 业务 需 求 平 铺 ， 通 过 小 红 点 等 方式 争夺 流量 入 口 ， 当 业务 的 需求 逐渐 增多 时 ， 左 侧 导 航 也 将 会 逐渐 腔 有 种 ， 核 心 功能 
和 新 的 产品 方向 的 功能 难以 得 到 合理 强化 。 


3) 交互 和 视 况 的 体验 和 格调 上 ， 不 仅 不 符合 Mac OS 最 新 人 机 交互 规范 和 视 完 风格 ， 也 难以 体现 目 己 的 特色 和 气质 。 


基于 全 新 的 产品 定位 以 及 Mac 用 户 的 操作 习惯 ， 设 计 的 目标 定位 为 优化 下 载 核心 功能 以 及 资源 友 现 的 产品 体验 ， 合 理 突出 
核心 和 重点 功能 。 我 们 从 以 下 三 个 方面 去 塑造 Mac 迅 雷 的 产品 交互 体验 和 视 党 风格 。 


首先 ， 导 航 结 构 上 ， 我 们 最 终 确 定 了 上 下 结构 ， 设 计 上 的 考虑 如 下 : 


1) 遵循 Mac OS 设计 规范 ，Mac OS 原生 应 用 如 App Store、Keynote 等 都 采用 了 简洁 的 上 下 导航 结构 ， 最 大 化 突出 内 容 展 
示 区 域 ， 节 省 更 多 空间 ， 使 得 内 容 更 加 聚焦 ， 减 少 其 他 元 素 对 内 容 的 干扰 。 


2) 简化 层级 结构 ， 重 新 组 织 旧 版 本 平 铺 式 的 导航 结构 ， 收 起 点 击 率 不 高 的 业务 功能 ， 使 得 核心 功能 和 新 功能 得 到 合理 的 曝 


优化 后 的 Mac 迅 雷 3.0 应 用 页 如 图 2-8 所 示 。 


mv о б к 


精 选 гета ”已 完成 软件 中 心 。 应 用 


内 + 


高 线 室 间 的 会 员 迅雷 浏览 器 支持 插件 


ә 


2-8 Mac 迅雷 3.0 应 用 页 


其 次 ， 在 下 载 列 表 中 也 尝试 使 用 卡片 式 设计 ， 每 一 条 下 载 任务 包含 了 较 多 的 操作 ， 旧 版 本 的 通栏 式 列表 设计 导致 了 阅读 信息 
和 操作 信息 的 分 离 ， 用 户 在 管理 下 载 任务 时 ， 视 线 焦点 移动 距离 较 长 。 所 以 改进 的 方向 为 通过 卡片 式 设 计 使 得 信息 模块 化 ， 一 个 
卡片 即 一 条 下 载 任务 ， 清 晰 明确 ， 既 避免 了 信息 的 散乱 ， 减 少 了 用 尸 思 考 的 时 | 间 ， 也 可 更 好 适 配 到 不 同 尺寸 的 界面 上 ， 如 图 2-9 
所 示 。 


最 后 ， 精 选 视频 推荐 页面 是 3.0 大 改版 的 重点 探索 功能 。 与 市 场 上 在 线 视频 网 站 不 同 的 是 ， 迅 雷 3.0 版 本 的 定位 不 是 让 用 户 在 
海量 的 视频 资源 中 挑选 ， 而 是 通过 强 运营 为 用 户 每 日 只 推荐 一 部 精品 电影 和 一 个 精 选 的 周边 短视 频 。 设 计 上 的 关键 问题 是 ， 如 何 
为 用 尸 打 造 “ 每 日 一 个 ”的 精致 和 精 选 的 交互 视 党 体验。 我 们 从 杂志 设计 中 寻找 灵感 ， 打 破 常 规 的 设计 ， 突 出 极 具 视 党 吸引 力 的 
电影 海报 ， 虚 化 的 大 背 景 使 得 界面 色彩 个 再 音调， 滚动 的 电影 短评 既 不 占用 界面 空间 ， 也 能 展示 更 多 的 内 容 ， 如 图 2-10 所 示 。 
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图 2-9 Mac 迅雷 3.0 正 在 下 载 页 
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图 2-10 ”Mac 迅雷 3.0 精 选 页 


3. 探 索 用 尸 诉求 ， 用 设计 打造 产品 运营 的 引爆 后 


产品 运营 设计 要 解决 用 户 的 心理 需求 ， 在 此 前 提 下 运用 巧妙 、 有 趣 、 好 玩 的 设计 形式 与 用 尸 建立 民 好 的 互动 。 如 迅雷 酒 襄 直 
播 中 的 动 效 设 计 ， 灵 动 的 动画 效果 、 精 美的 视觉 画面 其 本 质 都 是 抓 住 了 用 户 的 心理 ， 用 更 生动 、 好 玩 的 动 效 与 用 尸 建立 展 好 的 互 
动 ， 吸 引用 户 的 注意 力 。 动 效 为 产品 运营 设计 提供 了 更 大 的 展示 舞台 和 想象 空间 ， 以 其 独特 的 魅力 恰 忱 了 我 们 的 感官 体验 ， 让 产 
品 运营 设计 在 动 与 静 、 虚 与 实 中 引 友 用 户 的 兴趣 ， 在 不 断 的 交互 中 让 用 户 停 留 更 长 的 时 间 ， 人 不断 回来 以 达到 更 好 的 商业 价值 。 在 
后 面 的 章节 中 ， 会 详细 前 述 迅雷 酒 贸 直 播 产品 动 效 设计 的 一 些 技巧 和 方法 。 


2.1.2 ”活动 运 豆 设 计 


活动 运 写 设 计 的 特性 是 上 续 快 、 生 合 周 期 得 、 时 效 性 强 、 版 本 进 代 快 。 运 言 类 活动 主要 是 为 了 拉动 用 户 转化 率 而 策划 的 即时 
性 活动 ， 网 络 上 所 见 到 的 大 促 、 节 日 、 福 利 方面 的 运 豆 专题 都 属于 这 一 分 类 。 迅 雷 会 员 项 目 也 会 在 节日 里 做 一 些 活动 运营 ， 如 中 
秋 、 国 庆 、 开 学 季 、 双 11、 圣 诞 、 元 旦 等 ,活动 多 为 促销 ， 吸 引用 尸 开通 或 续费 迅雷 会 员 ， 如 图 2-11 所 示 。 
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图 2-11 迅雷 会 员 国庆 、 中 秋 活 动 运营 设计 页 


拉 新 的 活动 运营 设计 页 如 图 2-12 所 示 。 


活动 流程 


| 
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图 2-12 ”迅雷 会 员 首 充 拉 新 活动 运营 设计 页 


1. 色 彩 鲜明 、 浓 列 


为 了 达到 | 活动 页 面 整体 气氛 '， 活 动 运营 设计 在 用 色 上 都 比较 大 胆 ， 色 彩 丰 富 、 跳 跃 ， 视 党 冲击 力 强 ， 且 多 为 暖色 系 ， 如 图 2- 
13 所 示 。 这 样 可 以 充分 刺激 用 尸 眼 球 ， 以 促使 用 己 购 买 消费 。 


图 2-13 天 猫 双 11 活 动 推广 Banner 图 设计 


2. 设 计 形式 感 强 、 元 素 多 


化 ， 这 种 设计 在 活动 运营 设计 里 最 为 常 为 。 常 用 到 的 构图 版 式 有 左右 结构 、 友 散 


凡 、 线 、 面 的 运用 可 以 让 设计 形式 干 变 万 
状 、 目 由 式 等 ， 巧 妙 地 对 背景 、 产 品 、 文 字 进 行 排版 组 合 ， 营 造 活动 的 气氛 '， 如 图 2-14 所 示 。 


图 2-14 ”Banner 设 计 


灵活 多 样 ， 通 弟 及 用 左右 、 上 下 、 友 散 、 聚 焦 、 大 小 对 比 等 布局 
多 精心 设计 处 理 


活动 运营 设计 画面 版 式 设 计 形 式 感 强 、 
; 在 文案 字体 的 选择 和 设计 方面 也 比较 有 吸引 力 ， 


实际 案例 可 知 ， 
形式 ; 运用 丰富 的 颜色 、 设 计 元 素来 烘托 出 活动 热 南 的 气氛 


过 ， 并 把 促销 信息 突出 、 放 大 。 
息 有 效 传递 


从 设计 形式 到 画面 气氛 
运营 设计 现在 越 来 越 注重 个 性 、 趣 味 性 以 及 视觉 冲击 力 ， 页 面 的 形 


式 和 技巧 也 是 多 种 多 样 。 


品牌 运营 设计 适合 做 较 长 周期 的 宣传 ， 以 市 动 品牌 影响 力 、 包 妆 企 业 形 象 、 彰 显 企业 的 专业 和 实力 、 加 深 用 户 对 公司 产品 的 
信赖 感 。 在 互联 网 公司 ， 网 页 、 广 告 Banner 图 、flash 广 告 等 都 成 为 品牌 宣传 的 载体 。 


迅雷 影音 的 品牌 毗 播 图 ， 如 图 2-15 所 示 。 


手机 迅雷 的 品牌 轮 播 图 如 图 2-16 所 示 。 


a 


图 2-16 ”手机 迅雷 品牌 轮 播 图 


迅雷 9 品牌 页 采用 整 屏 大 图 设计 ， 给 人 一 种 在 观看 Imax 大 屏 电影 的 感 狗 ， 目 的 是 蛋 拟 真实 的 效果 ， 让 观众 身 临 其 境 。 融 像 最 
急 的 美术 来 目 于 对 现实 的 模拟 一 样 ， 这 种 拟 真 的 设计 至 今 仍然 适用 。 这 样 的 网 页 设计 多 以 全 屏 了 式 的 大 幅 图 像 和 视频 为 主 ， 以 一 种 
简单 却 有 效 的 万 陈 迅速 把 观众 市 入 它 所 设 定 的 情境 乙 中 。 如 图 2-17 所 示 的 迅雷 9 品牌 官网 ， 束 是 典型 代表 。 


同类 的 例子 还 有 Campos coffee 品 牌 官 网 ( 见 图 2-18) 等 。 
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图 2-18 Campos coffee 品 牌 官 网 


首 屏 都 被 大 篇 幅 的 育 景 图 履 兰 ， 那 么 垮 么 样 才 能 突出 主题 信息 ， 避 开 配 图 的 干扰 呢 ” 运 用 对 比 强烈 的 大 背景 和 具有 冲击 力 的 
字体 标题 进行 设计 排版 ， 融 可 以 让 视 部 更 聚焦 ， 更 好 地 突出 重点 信息 ， 这 也 是 目前 网 站 设计 的 一 个 大 趋势， 如 图 2-19 所 示 。 
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图 2-19 ”具有 冲击 力 字 体 设计 的 网 页 


3. 品 牌 延 给 卖 设 计 


一 个 品牌 在 建立 时 丈 应 注意 目 身 视觉 特 点 ， 从 颜色 、 图 形 图 像 到 VI 规范 使 用 等 均 应 如 此 。 品 牌 运营 设计 也 目 然 需要 在 传播 中 
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СНО КА, ЗАРЛАЛ НЧИ — Е, SS. РЕНЕ АУДА, АЗЕ дА ЕГН — АЕТ 
颜色 上 的 统一 ， 从 页 面 到 周边 产品 的 设计 ， 表 到 产品 端的 身份 图 标 展现 ， 都 保持 品牌 的 延续 设计 ， 如 图 2-20~ 图 2-22 所 示 。 
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品牌 运 襄 设计 大 多 画面 设计 聚焦 ， 主 体 突出 ; 颜色 简单 ;文案 信息 较 少 ， 字 体 较 大 ; 版 式 结构 简单 ， 单 采用 左右 、 上 下 、 友 
散 、 聚 焦 、 对 比 等 布局 形式 。 可 见 在 品牌 运营 设计 当中 ， 设 计 元 素 的 使 用 简单 ， 信 息 表达 直接， 注重 设计 整体 的 品牌 感 。 


214 推广 运 豆 设 计 


新 产品 或 者 运用 产品 中 的 一 个 新 功能 或 一 个 活动 为 了 让 更 多 的 用 户 知 晓 和 使 用 ， 融 要 企 各 种 载体 上 进行 推广 。 比 如 迅雷 要 推 
广 全 新 的 超级 会 员 特 权 ， 可 以 在 迅雷 客户 端 产品 、 迅 雷 移动 频 产 品 ， 还 有 迅雷 的 官网 或 制作 H5 让 用 户 在 第 三 方 产品 〈 比 如 微 信 
朋友 圈 上 ) 进行 推广 。 为 了 提高 推广 内 容 的 点 击 率 、 转 化 率 与 传播 率 ， 推 广 运 营 的 设计 在 不 同 载体 上 会 有 不 同 的 设计 风格 和 特 


#AMVSNO 


1. 高 尽 击 率 的 推广 运营 设计 匹配 投放 渠道 本 身 风格 


迅雷 9 客户 新 弹 窗 广告 有 三 种 样式 : 第 一 种 样式 为 彩色 美女 样式 的 图 片 加 按钮 样式 〈 见 图 2-23) ， 第 二 种 样式 为 简洁 的 系统 
消息 类 型 的 弹 窗 ( 见 图 2-24) ， 第 三 种 样式 为 色彩 鲜 丽 的 拟 物化 的 推广 样式 ( 见 图 2-25) 。 三 种 广告 内 容 都 是 类 似 的， 都 是 领 
取 迅 亩 会 员 ， 但 是 效果 有 很 大 的 差别 。 通 过 广告 流量 系统 后 台数 据 可 知 ， 在 广告 内 容 一 个 类 型 的 情况 下 ， 设 计 样 式 上 更 接近 软件 
本 身 风 格 的 消息 类 弹 窗 样式 的 广告 点 击 率 相对 较 高 ， 中 间 的 接近 软件 本 身 风 格 样 式 的 广告 点 击 率 最 高 。 试 想 ， 如 果 同 样 的 推广 内 
容 ， 在 美女 直播 的 平台 上 ， 是 人 否 第 一 种 方式 推广 效果 更 好 ? 在 迅雷 官网 上 ， 第 三 种 华丽 的 拟 物 化 的 推广 样式 的 设计 万 案 效 果 是 否 
更 好 呢 ? 


图 2-23 ”美女 素材 推广 样式 


92-24 系统 消息 类 型 推广 样式 


um z m 


图 2-25” 拟 物化 的 推广 样式 


经 过 很 多 案例 的 轧 结 和 分 析 ， 我 们 认为 推广 运营 设计 匹配 投放 染 道 本 身 风格 的 设计 一 般 点 击 率 会 相对 较 高 。 
2. 局 传播 率 的 推广 运营 设计 ， 需 抓 住 用 尸 分 享 的 心理 
H5 是 一 种 很 常见 的 推广 运营 设计 形式 ， 成 功 的 H5 会 让 用 尸 有 分 享 和 传播 的 ;中 动 ， 共 同 的 特点 都 是 抓 住 了 用 尸 或 是 标榜 目 


己 ， 或 是 利他 ， 或 是 目 我 价值 实现 。 


那么 什么 样 的 内 容 才 能 引起 分 享 ” 哪 几 种 H5 类 型 受 人 欢迎 ”如 何 将 目标 用 户 所 需要 的 东西 呈现 在 他 们 眼前 等 ”在 后 面 我 们 


会 详细 介绍 。 


第 2 草 ” 运 豆 设 计 


21 互联 网 运 豆 设 计 分 类 与 特 氮 


互联 网 公司 里 一 般 都 有 产品 、 运 营 、 技 术 、 设 计 、 测 试 这 几 个 岗位 。 我 曾经 问 过 运营 同事 一 个 问题 : “你 们 运营 到 底 做 什 
Z? 能 不 能 简单 概述 一 下 ? ” 那 位 同事 很 简单 明了 地 回答 说 : “运作 与 营 收 。” 运 作 一 个 产品 ， 对 产品 负 有 拉 新 、 留 趣 、 促 活 的 
责任 。 拉 新 ， 为 产品 市 来 新 用 户 或 流量 ， 通 单 用 话题 事件 宫 销 ， 或 者 通过 微 博 、 微 信 、3EO、3SEM 等 手段 去 实现 ; 留 仔 ， 留 住 
用 户 ， 让 用 户 留 下 来 真正 去 使 用 ， 天 注 数据 方面 的 留存 率 ， 如 次 日 留存 率 、 七 日 留 存 率 等 ; 促 活 ， 让 用 户 愿意 频繁 与 你 上 友 生 连 
接 ， 通 过 数据 分 析 用 户 喜 好 ， 抓 住 其 痛 点 增加 夭 性 ， 可 以 用 等 级 设置 、 激 励 体 系 等 提升 长 期 活跃 度 。 营 收 不 言 而 噜 ， 通 过 这 些 ) 
作 手 段 达 到 实现 产品 商业 价值 的 目的 。 


1 


EBA Zn sr, ХӘЈАЛ) ES. Ў) ЕТ, АЈ ЕТ, Е тенш, AFEJ8528FE, 97-18) 2727А. 


产品 运营 : 根据 公司 的 战略 方向 与 产品 潜在 用 户 的 具体 需求 ， 策 划 产 品 功 能 与 玩法 ， 并 推动 产品 功能 与 玩法 的 落地 实 
提升 用 户 体验 与 产品 价值 ， 并 监控 产品 数据 ， 通 过 数据 反馈 迭代 优化 产品 。 


. 活动 运营 : 顾名思义 ， 比 如 在 双 11、 双 12、 京 东 的 618 等 ， 都 会 看 到 铺天盖地 的 电 商 促 销 活动 ， 迅 雷 也 会 在 各 种 节日 ， 比 
如 会 员 周 年 庆 、 春 节 、 双 11 等 节日 ， 策 划 设 计 很 多 运营 活动 ， 通 过 送礼 促销 等 方式 ， 给 带 来 优惠 与 回 镇 ， 泻 染 节 日 氛围 。 


` 品牌 运营 : 品牌 运营 是 指 企业 利用 品牌 这 一 最 重要 的 无 形 资本 ， 在 塑造 品牌 形象 的 基础 上 ， 发 挥 品 牌 更 大 影响 力 ， 促 进 产 
品 的 生产 经 营 ， 使 品牌 资产 有 形 化 ， 实 现 企 业 长 期 发 展 和 企业 价值 增值 。 


` 推广 运营 : 通过 微 博 、 微 信 、 设 计 话 题 、 了 5 页 面 对 产 品 进行 推广 和 传播 ， 包 括 策 划 、 选 题 、 执 行 、 推 广 等 环节 。 优 秀 的 


ЮП 


运营 必须 掌握 行业 资讯 和 新 闻 热 点 ， 不 断 研究 有 效 且 新 颖 的 运营 手段 与 推广 模式 。 
与 互联 网 运营 对 应 的 设计 可 以 分 为 产品 运营 设计 、 活 动 运营 设计 、 品 牌 运营 设 计 、 推 广 运 膏 设计 等 几 个 大 类 。 


产品 运营 设计 的 目的 是 在 有 限 的 时 间 内 ， 给 用 己 最 有 价值 的 信息 ， 从 而 实现 商业 转化 。 


2.1.1 产品 运 豆 设 计 


Rl 


从 产品 的 诞生 到 后 期 运 宫 ， 是 一 个 长 期 的 、 不 断 迭 代 优 化 的 过 程 。 第 1 章 中 提 到 的 几 个 案例 ， 包 括 迅 雷 9、 手 机 迅雷 、 迅 
会 员 官 网 等 ， 都 属于 产品 运营 设计 。 产 品 运 营 设 计 有 很 多 特点 ， 比 较 重 要 的 有 以 下 三 个 : 


1. 通 过 对 产品 的 用 尸 研 究 与 数据 分 析 不 断 优化 产品 设计 


除了 第 1 章 中 的 案例 ， 我 们 再 举 一 个 迅雷 网 游 加 速 器 官网 设计 的 小 案例 ， 通 过 对 用 户 的 研究 和 对 后 人 台 用 户 来 源 数据 、 搜 索 关 
键 子 的 分 析 ， 针 对 不 同 的 用 户 ， 呈 现 不 同 的 页 面 。 


(1) ВР 
用 尸 从 不 了 解 到 接触 ， 表 到 熟悉 一 个 互联 网 产品 ， 通 常会 有 一 系列 的 角色 转化 。 
迅雷 网 游 加 速 器 官网 的 用 尸 角色 有 着 图 2-1 所 示 的 转化 过 程 。 


在 角色 转变 过 程 包含 的 几 个 节点 中 ， 我 们 对 用 户 属 性 、 行 为 预期 及 设计 目标 进行 分 析 ， 如 图 2-2 所 示 。 


地 


百度 部 分 ， 


类 型 А. 

通过 搜索 引擎 (精准 搜索 ) 或 推广 
页 等 方式 , 淮 备 选择 一 球 或 者 确定 
是 否 下 载 并 使 用 迅雷 网 游 加 速 器 
用 户 属性 ， 

， 没有 使 用 加 速 器 客户 端 


иса 
。 不 是 会 员 


用 户 的 行为 预期 : 

找到 一 球 好 的 网 游 加 建 般 (可 能 通 
过 比较 速度 、 价 格 、 美 观 、 资 源 占 
用 等 条 件 ) 

我 们 的 设计 目标 : 

- ИТЕ РЗ 


“ 为 会 员 页 导 流 


对 于 类 型 A 的 用 尸 ， 最 重要 的 信息 丈 是 客 尸 端的 介绍 信息 ， 


图 2-1 用 户 角 色 转 化 


类 型 В. 

通过 推广 得 知 活 动 、 礼 包 等 优惠 

内 容 ， 或 者 在 下 载 客 户 端 后 有 进 

一 步 的 需求 

用 万 属性 : 

` ЛЖ йт Р! ЛИ Г? 

НЖЖ Р 80 Ауа (% 
费 加 速 开 通 后 还 会 有 免费 会 员 ) 

用 户 的 行为 预期 : 

- 获得 更 完整 的 加 速 体验 


我 们 的 设计 目标 : 
”教育 用 户 会 员 价 但 ， 芭 励 消费 
”展示 活动 /礼包 ， 误 励 消费 


92-2 ”用户 研究 


以 及 一 个 明确 的 下 载 按钮 。 


类 型 С. 
认可 加 速 器 会 员 及 官网 活动 礼包 
体验 ,并 且 主 动 寻求 会 员 价 值 


用 户 属性 : 
` 加 速 黄 客户 端 用 户 
”付费 会 员 


用 户 的 行为 预期 : 

“参与 /获得 更 多 的 会 员 活 动 ， 
礼包 

， 获得 会 员 等 级 的 成 长 

我 们 的 设计 目标 : 

。 精准 并 清晰 展示 会 员 增值 内 容 

”通过 成 长 体系 增加 用 户 黏 性 


需要 在 首 屏 展现 价值 并 鼓励 用 己 下 


而 对 于 类 型 B 和 类 型 C 的 用 尸 ， 网 洲 加 速 器 客户 端的 价值 介绍 及 其 下 载 入 口 意 义 不 大 。 首 屏 应 通过 活动 、 礼 包 推广 来 展示 会 
员 价值 ， 协 助 用 户 使 用 成 长 体系 ， 帮 助 用 户 管理 和 使 用 会 员 功 能 。 


(2) 后 台数 据 分 析 


根据 迅雷 网 游 加 速 器 官网 后 台 的 数据 统计 ， 用 尸 的 访问 来 源 如 图 2-3 所 示 : 来 和 目 搜索 引擎 的 上 了 近 一 半 ， 奋 加 上 外 部 链接 的 


已 经 过 半 。 其 余 是 活动 页 来 源 及 直接 访问 ， 


而 搜索 天 键 词 绝 大 多 数 都 是 精准 搜索 。 排 名 前 十 的 搜索 关键 词 如 图 2-4 所 示 。 


(直接 访问 一 般 是 老 用 尸 输入 网 址 或 通过 书签 访问 ) 。 


搜索 关键 词 的 精准 性 说 明 来 访 用 户 对 迅雷 网 游 加 速 器 已 经 有 一 定 的 了 解 ， 有 着 较 强 的 下 载 需求 或 是 准备 参考 比较 。 


结合 前 面 的 用 户 分 析 ， 针 对 用 户 类 型 A 和 用 户 类 型 B、C， 将 加 速 器 官网 拆 分 成 两 个 部 分 。 


活动 页 访问 和 4 
直接 访问 À 


一 外 部 链接 
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图 2-3 用户 访 问 来 源 
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图 2-4 ”用 户 搜索 关键 词 


我 们 将 A 类 用 户 定义 为 新 用 户 ， 他 们 的 行为 预期 是 找到 一 寺 好 的 网 游 加 速 器 ， (可 能 通过 比较 速度 、 价 格 、 美 观 、 资 源 占用 
等 条 件 ) ， 我 们 设计 了 会 员 官 网 的 前 置 员 ， 如 图 2-5 所 示 。 


活动 专区 (@ emo 帮助 指导 (ж) 进入 家 网 


图 2-5 ”对 类 型 A 设 计 的 官网 前 置 页 


前 置 页 的 设计 使 新 用 户 搜索 加 速 器 到 达 的 结果 更 符合 预期 ， 前 置 首 页 信息 非 单 简单 ， 展 示 加 速 器 的 产品 形象 及 客户 端 下 载 信 
， 并 给 欲 进一步 了 解 的 用 户 以 不 同 的 入 口 。 


ell], 


而 对 于 类 型 B 和 类 型 C 的 老 用 户 ， 客 户 端的 价值 及 其 下 载 入 口 意义 不 大 。 合 理 展 示 包 括 会 员 教 育 、 活 动 展示 、 热 门 礼 包 等 内 
容 ， 让 付费 会 员 与 未 付费 的 免费 体验 的 用 户 对 消费 后 的 体验 有 深刻 且 正 面 的 预期 ， 如 图 2-6 所 示 。 


ү 


根据 前 置 官网 热力 图 及 点 击 率 统计 显示 ， 客 尸 端 下 载 按钮 43% 的 点 击 率 证 明了 前 置 员 和 官网 首页 分 离 的 成 功 。 
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图 2-6 ”为 类 型 B 和 类 型 C 设 计 的 官网 首页 


2. 塑 造 符合 “产品 定位 ”的 交互 与 视 帝 风格 


= 


“ 严 品 定位 ”这 个 概念 是 在 1972 年 由 阿尔 :里 斯 与 杰克 - 特 鲁 特 提出 并 快速 普及 的 。 定 位 并 不 是 指 产品 本 身 ， 而 是 指 产 品 要 塑 
造 一 种 在 用 户 心 目 中 的 印象 与 用 途 。 每 个 产品 都 有 目 己 特定 的 属性 和 功能 ， 产 品 定位 不 一 样 ， 目 标 人 和 群 残 不 一 样 ， 产 品 设计 的 气 
质 也 融 不 一 样 。 设 计 要 塑造 符合 产品 定位 的 交互 与 视觉 风格 。Mac 和 迅雷 2.0 的 风格 如 图 2-7 所 示 。 


迅雷 
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Бу [lol 电影 天 堂 www:.Ioldytt.com】 闪 电 ,….E21. 中 英 字 幕 .HDTVrip.1024X576.mp4 
к 

m; [阳光 电影 wwwygdy8.com]. 绝 地 逃亡 .HD.720p. 国 语 中 字 .rmvb 

rit 


E, [阳光 电影 wwwygdy8,comJj, 爱 丽 冀 梦 ,.. 镜 中 奇遇 记 .HD.720p. 中 英 双 字幕 .rmvb 


> [迅雷 下 载 www.2tu.cc] 两 杆 太 烟 枪 .BD 中 英 双 字 1024 高 清 .mkwv 


图 2-7 ”Mac 迅雷 2.0 


Mac 迅 雷 3.0 的 产品 定位 由 单一 的 下 载 工具 转变 为 “ 找 + 下 + 看 ”一 体 的 视频 消费 工具 ， 回 资源 下 载 的 上 游 和 下 游 (资源 友 现 
和 资源 消费 ) 探索 。 


结合 产品 定位 ， 反 观 旧版 本 Mac 迅 雷 2.0 的 不 足 : 


1) 左右 导航 结构 对 右 侧 内 容 的 拓展 有 所 限制 。 在 尝试 了 多 种 万 案 之 后 ， 友 现 有 限 的 客 尸 端 尺寸 与 较 大 的 内 容 展 示 区 域 在 空 
间 比 例 上 和 视 竞 协调 性 上 有 着 难以 调和 的 矛盾 。 


2) 左 侧 业务 需 求 平 铺 ， 通 过 小 红 点 等 方式 争夺 流量 入 口 ， 当 业务 的 需求 逐渐 增多 时 ， 左 侧 导 航 也 将 会 逐渐 腔 有 种 ， 核 心 功能 
和 新 的 产品 方向 的 功能 难以 得 到 合理 强化 。 


3) 交互 和 视 况 的 体验 和 格调 上 ， 不 仅 不 符合 Mac OS 最 新 人 机 交互 规范 和 视 完 风格 ， 也 难以 体现 目 己 的 特色 和 气质 。 


基于 全 新 的 产品 定位 以 及 Mac 用 户 的 操作 习惯 ， 设 计 的 目标 定位 为 优化 下 载 核心 功能 以 及 资源 友 现 的 产品 体验 ， 合 理 突出 
核心 和 重点 功能 。 我 们 从 以 下 三 个 方面 去 塑造 Mac 迅 雷 的 产品 交互 体验 和 视 党 风格 。 


首先 ， 导 航 结 构 上 ， 我 们 最 终 确 定 了 上 下 结构 ， 设 计 上 的 考虑 如 下 : 


1) 遵循 Mac OS 设计 规范 ，Mac OS 原生 应 用 如 App Store、Keynote 等 都 采用 了 简洁 的 上 下 导航 结构 ， 最 大 化 突出 内 容 展 
示 区 域 ， 节 省 更 多 空间 ， 使 得 内 容 更 加 聚焦 ， 减 少 其 他 元 素 对 内 容 的 干扰 。 


2) 简化 层级 结构 ， 重 新 组 织 旧 版 本 平 铺 式 的 导航 结构 ， 收 起 点 击 率 不 高 的 业务 功能 ， 使 得 核心 功能 和 新 功能 得 到 合理 的 曝 


优化 后 的 Mac 迅 雷 3.0 应 用 页 如 图 2-8 所 示 。 
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2-8 Mac 迅雷 3.0 应 用 页 


其 次 ， 在 下 载 列 表 中 也 尝试 使 用 卡片 式 设计 ， 每 一 条 下 载 任务 包含 了 较 多 的 操作 ， 旧 版 本 的 通栏 式 列表 设计 导致 了 阅读 信息 
和 操作 信息 的 分 离 ， 用 户 在 管理 下 载 任务 时 ， 视 线 焦点 移动 距离 较 长 。 所 以 改进 的 方向 为 通过 卡片 式 设 计 使 得 信息 模块 化 ， 一 个 
卡片 即 一 条 下 载 任务 ， 清 晰 明确 ， 既 避免 了 信息 的 散乱 ， 减 少 了 用 尸 思 考 的 时 | 间 ， 也 可 更 好 适 配 到 不 同 尺寸 的 界面 上 ， 如 图 2-9 
所 示 。 


最 后 ， 精 选 视频 推荐 页面 是 3.0 大 改版 的 重点 探索 功能 。 与 市 场 上 在 线 视频 网 站 不 同 的 是 ， 迅 雷 3.0 版 本 的 定位 不 是 让 用 户 在 
海量 的 视频 资源 中 挑选 ， 而 是 通过 强 运营 为 用 户 每 日 只 推荐 一 部 精品 电影 和 一 个 精 选 的 周边 短视 频 。 设 计 上 的 关键 问题 是 ， 如 何 
为 用 尸 打 造 “ 每 日 一 个 ”的 精致 和 精 选 的 交互 视 党 体验。 我 们 从 杂志 设计 中 寻找 灵感 ， 打 破 常 规 的 设计 ， 突 出 极 具 视 党 吸引 力 的 
电影 海报 ， 虚 化 的 大 背 景 使 得 界面 色彩 个 再 音调， 滚动 的 电影 短评 既 不 占用 界面 空间 ， 也 能 展示 更 多 的 内 容 ， 如 图 2-10 所 示 。 
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图 2-9 Mac 迅雷 3.0 正 在 下 载 页 
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图 2-10 ”Mac 迅雷 3.0 精 选 页 


3. 探 索 用 尸 诉求 ， 用 设计 打造 产品 运营 的 引爆 后 


产品 运营 设计 要 解决 用 户 的 心理 需求 ， 在 此 前 提 下 运用 巧妙 、 有 趣 、 好 玩 的 设计 形式 与 用 尸 建立 民 好 的 互动 。 如 迅雷 酒 襄 直 
播 中 的 动 效 设 计 ， 灵 动 的 动画 效果 、 精 美的 视觉 画面 其 本 质 都 是 抓 住 了 用 户 的 心理 ， 用 更 生动 、 好 玩 的 动 效 与 用 尸 建立 展 好 的 互 
动 ， 吸 引用 户 的 注意 力 。 动 效 为 产品 运营 设计 提供 了 更 大 的 展示 舞台 和 想象 空间 ， 以 其 独特 的 魅力 恰 忱 了 我 们 的 感官 体验 ， 让 产 
品 运营 设计 在 动 与 静 、 虚 与 实 中 引 友 用 户 的 兴趣 ， 在 不 断 的 交互 中 让 用 户 停 留 更 长 的 时 间 ， 人 不断 回来 以 达到 更 好 的 商业 价值 。 在 
后 面 的 章节 中 ， 会 详细 前 述 迅雷 酒 贸 直 播 产品 动 效 设计 的 一 些 技巧 和 方法 。 


2.1.2 ”活动 运 豆 设 计 


活动 运 写 设 计 的 特性 是 上 续 快 、 生 合 周 期 得 、 时 效 性 强 、 版 本 进 代 快 。 运 言 类 活动 主要 是 为 了 拉动 用 户 转化 率 而 策划 的 即时 
性 活动 ， 网 络 上 所 见 到 的 大 促 、 节 日 、 福 利 方面 的 运 豆 专题 都 属于 这 一 分 类 。 迅 雷 会 员 项 目 也 会 在 节日 里 做 一 些 活动 运营 ， 如 中 
秋 、 国 庆 、 开 学 季 、 双 11、 圣 诞 、 元 旦 等 ,活动 多 为 促销 ， 吸 引用 尸 开通 或 续费 迅雷 会 员 ， 如 图 2-11 所 示 。 
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图 2-11 迅雷 会 员 国庆 、 中 秋 活 动 运营 设计 页 


拉 新 的 活动 运营 设计 页 如 图 2-12 所 示 。 


活动 流程 


| 
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图 2-12 ”迅雷 会 员 首 充 拉 新 活动 运营 设计 页 


1. 色 彩 鲜明 、 浓 列 


为 了 达到 | 活动 页 面 整体 气氛 '， 活 动 运营 设计 在 用 色 上 都 比较 大 胆 ， 色 彩 丰 富 、 跳 跃 ， 视 党 冲击 力 强 ， 且 多 为 暖色 系 ， 如 图 2- 
13 所 示 。 这 样 可 以 充分 刺激 用 尸 眼 球 ， 以 促使 用 己 购 买 消费 。 


图 2-13 天 猫 双 11 活 动 推广 Banner 图 设计 


2. 设 计 形式 感 强 、 元 素 多 


化 ， 这 种 设计 在 活动 运营 设计 里 最 为 常 为 。 常 用 到 的 构图 版 式 有 左右 结构 、 友 散 


凡 、 线 、 面 的 运用 可 以 让 设计 形式 干 变 万 
状 、 目 由 式 等 ， 巧 妙 地 对 背景 、 产 品 、 文 字 进 行 排版 组 合 ， 营 造 活动 的 气氛 '， 如 图 2-14 所 示 。 


图 2-14 ”Banner 设 计 


灵活 多 样 ， 通 弟 及 用 左右 、 上 下 、 友 散 、 聚 焦 、 大 小 对 比 等 布局 
多 精心 设计 处 理 


活动 运营 设计 画面 版 式 设 计 形 式 感 强 、 
; 在 文案 字体 的 选择 和 设计 方面 也 比较 有 吸引 力 ， 


实际 案例 可 知 ， 
形式 ; 运用 丰富 的 颜色 、 设 计 元 素来 烘托 出 活动 热 南 的 气氛 


过 ， 并 把 促销 信息 突出 、 放 大 。 
息 有 效 传递 


从 设计 形式 到 画面 气氛 
运营 设计 现在 越 来 越 注重 个 性 、 趣 味 性 以 及 视觉 冲击 力 ， 页 面 的 形 


式 和 技巧 也 是 多 种 多 样 。 


品牌 运营 设计 适合 做 较 长 周期 的 宣传 ， 以 市 动 品牌 影响 力 、 包 妆 企 业 形 象 、 彰 显 企业 的 专业 和 实力 、 加 深 用 户 对 公司 产品 的 
信赖 感 。 在 互联 网 公司 ， 网 页 、 广 告 Banner 图 、flash 广 告 等 都 成 为 品牌 宣传 的 载体 。 


迅雷 影音 的 品牌 毗 播 图 ， 如 图 2-15 所 示 。 


手机 迅雷 的 品牌 轮 播 图 如 图 2-16 所 示 。 


a 


图 2-16 ”手机 迅雷 品牌 轮 播 图 


迅雷 9 品牌 页 采用 整 屏 大 图 设计 ， 给 人 一 种 在 观看 Imax 大 屏 电影 的 感 狗 ， 目 的 是 蛋 拟 真实 的 效果 ， 让 观众 身 临 其 境 。 融 像 最 
急 的 美术 来 目 于 对 现实 的 模拟 一 样 ， 这 种 拟 真 的 设计 至 今 仍然 适用 。 这 样 的 网 页 设计 多 以 全 屏 了 式 的 大 幅 图 像 和 视频 为 主 ， 以 一 种 
简单 却 有 效 的 万 陈 迅速 把 观众 市 入 它 所 设 定 的 情境 乙 中 。 如 图 2-17 所 示 的 迅雷 9 品牌 官网 ， 束 是 典型 代表 。 


同类 的 例子 还 有 Campos coffee 品 牌 官 网 ( 见 图 2-18) 等 。 
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图 2-18 Campos coffee 品 牌 官 网 


首 屏 都 被 大 篇 幅 的 育 景 图 履 兰 ， 那 么 垮 么 样 才 能 突出 主题 信息 ， 避 开 配 图 的 干扰 呢 ” 运 用 对 比 强烈 的 大 背景 和 具有 冲击 力 的 
字体 标题 进行 设计 排版 ， 融 可 以 让 视 部 更 聚焦 ， 更 好 地 突出 重点 信息 ， 这 也 是 目前 网 站 设计 的 一 个 大 趋势， 如 图 2-19 所 示 。 
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图 2-19 ”具有 冲击 力 字 体 设计 的 网 页 


3. 品 牌 延 给 卖 设 计 


一 个 品牌 在 建立 时 丈 应 注意 目 身 视觉 特 点 ， 从 颜色 、 图 形 图 像 到 VI 规范 使 用 等 均 应 如 此 。 品 牌 运营 设计 也 目 然 需要 在 传播 中 
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颜色 上 的 统一 ， 从 页 面 到 周边 产品 的 设计 ， 表 到 产品 端的 身份 图 标 展现 ， 都 保持 品牌 的 延续 设计 ， 如 图 2-20~ 图 2-22 所 示 。 
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品牌 运 襄 设计 大 多 画面 设计 聚焦 ， 主 体 突出 ; 颜色 简单 ;文案 信息 较 少 ， 字 体 较 大 ; 版 式 结构 简单 ， 单 采用 左右 、 上 下 、 友 
散 、 聚 焦 、 对 比 等 布局 形式 。 可 见 在 品牌 运营 设计 当中 ， 设 计 元 素 的 使 用 简单 ， 信 息 表达 直接， 注重 设计 整体 的 品牌 感 。 


214 推广 运 豆 设 计 


新 产品 或 者 运用 产品 中 的 一 个 新 功能 或 一 个 活动 为 了 让 更 多 的 用 户 知 晓 和 使 用 ， 融 要 企 各 种 载体 上 进行 推广 。 比 如 迅雷 要 推 
广 全 新 的 超级 会 员 特 权 ， 可 以 在 迅雷 客户 端 产品 、 迅 雷 移动 频 产 品 ， 还 有 迅雷 的 官网 或 制作 H5 让 用 户 在 第 三 方 产品 〈 比 如 微 信 
朋友 圈 上 ) 进行 推广 。 为 了 提高 推广 内 容 的 点 击 率 、 转 化 率 与 传播 率 ， 推 广 运 营 的 设计 在 不 同 载体 上 会 有 不 同 的 设计 风格 和 特 
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1. 高 尽 击 率 的 推广 运营 设计 匹配 投放 渠道 本 身 风格 


迅雷 9 客户 新 弹 窗 广告 有 三 种 样式 : 第 一 种 样式 为 彩色 美女 样式 的 图 片 加 按钮 样式 〈 见 图 2-23) ， 第 二 种 样式 为 简洁 的 系统 
消息 类 型 的 弹 窗 ( 见 图 2-24) ， 第 三 种 样式 为 色彩 鲜 丽 的 拟 物化 的 推广 样式 ( 见 图 2-25) 。 三 种 广告 内 容 都 是 类 似 的， 都 是 领 
取 迅 亩 会 员 ， 但 是 效果 有 很 大 的 差别 。 通 过 广告 流量 系统 后 台数 据 可 知 ， 在 广告 内 容 一 个 类 型 的 情况 下 ， 设 计 样 式 上 更 接近 软件 
本 身 风 格 的 消息 类 弹 窗 样式 的 广告 点 击 率 相对 较 高 ， 中 间 的 接近 软件 本 身 风 格 样 式 的 广告 点 击 率 最 高 。 试 想 ， 如 果 同 样 的 推广 内 
容 ， 在 美女 直播 的 平台 上 ， 是 人 否 第 一 种 方式 推广 效果 更 好 ? 在 迅雷 官网 上 ， 第 三 种 华丽 的 拟 物 化 的 推广 样式 的 设计 万 案 效 果 是 否 
更 好 呢 ? 


图 2-23 ”美女 素材 推广 样式 


92-24 系统 消息 类 型 推广 样式 


б ГЕТЕ КЕРЕ. 


图 2-25” 拟 物化 的 推广 样式 


经 过 很 多 案例 的 轧 结 和 分 析 ， 我 们 认为 推广 运营 设计 匹配 投放 染 道 本 身 风格 的 设计 一 般 点 击 率 会 相对 较 高 。 
2. 局 传播 率 的 推广 运营 设计 ， 需 抓 住 用 尸 分 享 的 心理 
H5 是 一 种 很 常见 的 推广 运营 设计 形式 ， 成 功 的 H5 会 让 用 尸 有 分 享 和 传播 的 ;中 动 ， 共 同 的 特点 都 是 抓 住 了 用 尸 或 是 标榜 目 


己 ， 或 是 利他 ， 或 是 目 我 价值 实现 。 


那么 什么 样 的 内 容 才 能 引起 分 享 ” 哪 几 种 H5 类 型 受 人 欢迎 ”如 何 将 目标 用 户 所 需要 的 东西 呈现 在 他 们 眼前 等 ”在 后 面 我 们 


会 详细 介绍 。 


作为 设计 师 ， 怎 样 才能 设计 出 吸引 用 尸 眼球 、 点 击 转 化 高 且 能 高 度 还 原 运 营 目 标的 页 面 呢 ? 如 何 定 位 设计 风格 ”如 何 布局 内 
容 、 呈 现 信 息 ? 如 何 配 色 .….. 其 实 运 营 设 计 可 以 通过 一 套 行 之 有 效 的 流程 万 法 帮助 我 们 达到 目标 。 运 营 设 计 的 全 流程 分 为 需求 分 


析 、 筛 选 分 解 、 设 计 方 案 、 验 收 与 总 结 四 个 步骤 ， 如 图 2-26 所 示 。 


运营 设计 的 四 个 步 驿 


需求 分 析 一 > 核心 信息 一 设计 方案 一 > 验收 与 思 第 


图 2-26 运营 设计 的 四 个 步骤 


2.2.1 需求 分 析 


Ш 


首先 需要 了 解 运营 设计 的 方向 和 目标 。 所 谓 方 向 是 指 运 营 设 计 按 照 上 文 所 述 分 为 产品 运营 、 活 动 运 营 、 品 牌 运营 、 推 广 运 
曹 。 活 动 运营 又 可 以 细 分 为 日 常 运营 、 热 门 话题 运营 、 节 假日 主题 运营 、 专 题 运 曹 等 ， 而 不 同类 型 的 运营 各 自 的 特点 又 决定 了 其 
设计 上 的 差异 ， 因 此 运营 设计 用 于 满足 哪 一 类 需求 这 个 大 方向 就 决定 了 页 面 的 整体 风格 、 布 局 以 及 视觉 设计 中 的 色彩 、 字 体 、 素 
材 等 ; 所 谓 目标 是 明确 运 豆 的 目的 和 预期 ， 在 其 较 短 的 生命 周期 内 ， 准 确 、 快 速 地 将 明确 的 目的 传递 给 用 户 ， 做 到 设计 目标 与 运 
营 目 标高 度 一 怪 。 例 如 同一 个 活动 的 预 热 页 面 和 正式 推送 页 面 在 不 同 阶 段 的 目标 不 一 样 ， 预 期 传递 给 用 尸 的 信息 也 不 一 样 ， 也 丈 
决定 了 信息 层次 结构 和 排版 的 方式 有 所 不 同 。 


超级 会 员 作为 打造 的 一 个 全 新 人 至 苯 会 员 类 型 ， 在 预 热 页 面 中 豆 寺 了 一 定 的 神秘 感 ， 大 篇 幅 的 页 面 只 突出 尊贵 感 和 时 间 信 息 ， 
给 用 尸 强 烈 的 视 完 /中 击 力 和 信息 聚焦 ,减少 其 他 细 忆 信息 对 页 面 的 干扰 ， 如 图 2-27 所 示 。 


图 2-27 超级 会 员 上 线 前 预 热 页 


而 正式 上 线 的 页 面 ( 见 图 2-28) ， 除 了 保留 和 继承 了 预 热 页 的 视觉 风格 和 元 素 之 外 ， 将 名 称 、 特 权 、 人 金额 ， 按 钮 等 更 多 信 
乱 融 入 页 面 中 ， 并 调整 了 视 癌 焦点 ， 将 原本 聚焦 的 超级 会 员 形 象 右 移 ， 将 视 咒 焦点 转 为 业务 介绍 和 开通 引导 。 


其 次 明确 目标 用 尸 群 。 例 如 活动 运营 中 目标 可 以 细 分 为 拉 新 、 回 流 等 。 拉 新 的 主要 用 户 群 是 非 会 员 用 尸 和 新 用 尸 ， 回 流 的 主 
要 用 户 群 是 已 过 期 或 者 快 过 期 的 老 用 户 。 那 么 在 拉 新 的 页 面 设计 中 ， 主 题 内 容 突出 打折 、 特 权 或 页 面 的 互动 性 和 娱乐 性 ， 吸 引用 
尸 参 与 ， 视 党 风格 大 多 热情 有 活力 ， 目 的 是 让 用 尸 了 解 会 员 的 优势 并 用 强烈 的 视 完 氛围 刺激 用 户 的 购买 欲望 ， 如 图 2-29 所 示 ; 
而 在 回流 的 页 面 设计 中 ， 则 尝试 突出 情感 化 ， 设 计 风 格 可 以 温馨 烛 情 ， 目 的 是 调动 老 用 户 的 活路 度 ， 唤 起 用 尸 在 使 用 过 程 中 的 民 
好 感受 ， 给 用 户 以 情感 市 入 ， 如 图 2-30 所 示 。 


图 2-28 超级 会 员 上 线 正 式 页 


图 2-29 刺激 新 用 户 开 通 活动 页 
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图 2-30 ”调动 老 用 户 活 跃 度 活动 页 


2.2.2 20779 


将 核心 内 容 筛 选 出 来 ， 明 确 第 一 屏 的 页 面 内 容 和 视 咯 焦点 是 筛选 分 解 环节 的 重要 工作 内 容 。 页 面 中 承载 的 信息 很 多 ， 需 要 将 
这 些 内 容重 新 组 织 ， 表 次 回顾 设计 目标 和 用 户 群 ， 以 前 期 的 目标 导向 为 基础 ， 排 列 出 信息 的 优先 级 和 重要 性 ， 把 最 有 价值 的 信息 
传达 给 用 户 ， 用 设计 建立 起 产品 与 用 户 展 好 的 天 系 ， 创 造 恰 到 好 处 的 吸引 力 ， 平 衡 用 户 的 情感 ， 控 制 注意 力 。 


例如 在 进行 春节 抢 红 包 活 动 的 运营 设计 需求 时 ， 活 动 的 信息 量 非 常 大 ， 活 动 流程 包含 抢 红 包 、 折 红包、 红包 多 换 三 个 环节 ， 
每 个 环节 中 又 包含 多 个 玩法 : 普通 红包 、 野 华 红包 、 待 拆 红包 、 红 包 金 额 、 红 包 兄 换 jPhone7、 好 友 解 锁 、 兄 换 攻 略 、 匈 换 用 户 
榜 、 红 包 提现 等 。 在 着 手 开始 设计 前 ， 需 要 将 这 些 信息 的 层级 关系 、 优 移 级 全 部 酉 理 清 楚 ( 见 图 2-31) ， 才 能 在 页 面 中 合理 清 
晰 布局 ， 最 终 明 确 地 将 信息 传递 给 用 户 。 在 第 一 屏 的 有 限 空间 内 ， 需 要 承载 最 核心 的 内 容 一 活动 标题 和 和 抢 红包 。 


图 2-31 春节 抢 红 包 活 动 页 信息 梳理 


杭 理 好 信息 逻辑 和 重要 性 之 后 ， 页 面 布局 按照 信息 的 层级 逐一 进行 展现 ， 视 锅 设 计 的 模块 和 分 布 也 清晰 了 很 多 ， 最 终 视 竞 效 
果 如 图 2-32 所 示 。 


在 设计 需求 到 达 设 计 师 手中 时 ， 设 计 师 的 创意 灵感 并 不 会 像 洪水 一 样 渭 来 ， 灵 感 的 来 源 企 于 日 昔 的 积累 ， 所 见 所 闻 及 所 想 。 
每 个 设计 师 都 有 目 己 的 设计 灵感 库 ， 痢 手 设计 前 翻阅 大 量 相 匹配 的 设计 风格 和 布局 进行 参考 ， 可 以 提升 设计 效率 ， 运 言 设计 亦 是 


如 此 。 在 做 好 了 素材 的 收集 和 准备 后 ， 设 计 的 过 程 可 以 分 为 三 个 步 : 
(观看 足球 直播 ) 为 例 来 看 一 下 。 
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92-32 ”春节 抢 红包 活动 页 视觉 效果 图 


1. 定 义 页 面 风 格 


此 次 活动 的 两 个 关键 词 是 “超级 会 员 ” 和 “ 踢 足 球 ”， 所 以 既 要 表现 出 超级 会 员 的 尊贵 与 采光 ,又 要 体现 出 踢 足 球 的 动感 与 
健美 ,这 两 者 的 磁 撞 会 形成 一 种 尊贵 、 动 感 、 炉 酷 的 氛围 。 所 以 在 视 党 表现 方面 想 要 打破 网 络 上 普遍 存在 的 天 于 足球 页 面 的 形 
式 ， 并 且 要 烷 跟 设计 趋势 ， 故 我 们 最 终 决 定 使 用 局 平和 实景 素材 结合 的 手法 来 定义 此 次 页 面 的 视 党 风格 。 


2. 选 取 配 色 方 案 


超级 会 员 的 品牌 色 是 黑 与 金 ， 足 球 类 型 的 主 色调 是 绿 因 场 的 绿色 ， 所 以 页 面 的 背景 颜色 使 用 黑 和 绿 来 配合 完成 。 黑 色 属 于 百 
搭 色 ， 与 很 多 颜色 搭配 都 会 形成 各 自 不 同 的 基调 ， 尤 其 和 黄色 、 绿 色 在 一 起 属于 常见 的 固定 搭配 。Button 及 可 点 击 的 文字 链 颜 
色 统 一 用 亮 黄 色 来 区 分 。 红 色 是 “新 严 体 育 ” 的 品牌 色 ， 故 加 入 了 一 点 点 红色 来 提升 合作 方 的 品牌 感 。 如 图 2-33 所 示 ， 此 页 面 
的 配色 就 出 来 了 ， 并 且 要 擅 于 利用 颜色 明暗 度 和 相近 色 做 主 次 、 突 出 和 弱化 。 


超级 会 员 


— 


图 2-33 ”要 配色 来 源 


3. 内 容 排版 ， 丰 富 画 面 、 点 缀 气氛 (质感 、 纹 理 、 率 材 ) 


最 后 对 页 面 中 需要 展现 给 用 户 的 信息 和 内 容 进 行 梳理 和 布局 ， 方 法 可 参考 2.2.2 节 中 介绍 的 信息 优先 级 和 重要 性 划分 。 在 页 
面 中 点 缀 相关 的 线条 和 规则 的 几何 图 形 ， 比 如 圆 形 是 来 目 足 球 的 属性 ， 斜 线 既 有 动感 的 特色 又 和 超级 会 员 的 LOGO 图 形 的 形式 相 
呼应 ， 委 形 是 背景 中 斜 续 与 面 堵 加 产生 的 图 形 ， 再 加 上 标题 “免费 看 英超 ”的 字体 设计 ， 它 们 互 为 旋律 汗 奏 出 页 面 的 动感 和 形 


式 。 其 中 在 Banner 背 景 中 使 用 了 踊 足 球 的 现场 素材 来 点 题 “ 足 球 直播 ”， 这 样 束 形成 了 页 面 的 统一 性 。 这 种 设计 打破 了 目前 普 
遍 存 在 的 足球 活动 页 面 的 传统 设计 风格 。 最 终 效果 如 图 2-34 所 示 。 
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图 2-34 看 英超 活动 页 效果 图 


224 验收 与 总 结 


在 设计 交付 前 痛 或 开 友 后 ， 设 计 实现 还 原 验收 的 环节 也 非常 重要 。 在 产品 上 友 布 前 ， 需 要 有 设计 走 坦 的 环节 ( 见 图 2-35) , 
将 页 面 中 的 问题 柄 理 描述 出 来 ， 进 行进 一 步 优 化 ， 以 保证 设计 效果 最 终 实 现 落 地 。 


问题 描述 


列表 title ; 数字 的 单位 不 放 在 title 上 , PR 
ТЕ МЕЗ] 


2 ЁТ Fm yB , ЕТ tunas 


3 平台 福利 ”说 1e 改 成 “迅雷 福利 


图 2-35 ”产品 上 线 前 走 碍 文档 


在 上 线 友 布 后 ， 设 计 师 的 任务 并 没有 最 终 完成 ， 还 要 持续 跟 进 产品 和 页 面 数据 反馈， 了 解 设计 的 效果 和 有 效 性 ， 关 注 关 键 设 
计 点 的 数据 表现 在 页 面 中 是 人 否 有 达到 预期 的 效果 和 作用 ， 并 进行 一 次 思 结 ， 控 据 设 计 中 的 优点 和 不 足 ， 为 下 一 次 的 设计 做 沉 演 。 
例如 : 会 员 开 放 日 的 活动 页 上 线 后 ， 跟 进 数 据 反 馈 及 现 第 一 屏 内 两 个 按钮 分 流 严 重 ， 用 户 选择 不 聚焦 ， 导 致 转化 率 较 低 ， 


而 快速 响应 ， 将 首 屏 内 容 聚 焦 为 一 个 ， 文 付 数据 有 了 明显 提升 。 在 后 续 的 活动 页 设计 中 也 尽量 避免 在 第 一 屏 有 两 个 主 次 相当 的 按 
钮 ， 或 者 区 分 主 次 。 优 化 前 后 分 别 如 图 2-36 和 图 2-37 所 示 。 
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图 2-36” 动 页 上 线 后 跟 进 持续 优化 (优化 前 ) 
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92-37 ”上线 后 跟 进 持续 优化 (优化 后 ) 


通过 前 面 的 介绍 ， 我 们 了 和 解 了 运营 设计 的 分 类 及 特点 ， 也 知道 了 运营 设计 的 大 体 步骤 ， 本 章 接 下 来 的 几 个 小 节 将 会 举 一 些 实 
战 案 例 ， 来 详细 讲解 : 产品 运营 设计 中 动 效 的 设计 技巧 及 运用 到 具体 项 目 中 的 方法 ， 活 动 运营 页 的 设计 有 哪些 方法 、 步 又 和 关键 


元 素 的 设计 点 ， 迅 雷 超 级 会 员 的 品牌 运营 设计 的 详细 过 程 是 什么 样 的 ， 如 何 将 品牌 设计 直入 人 心 ， 以 及 推广 设计 中 要 想 提高 H5 
转化 与 传播 率 应 做 哪些 分 析 和 思考 。 


23 动静 有 音 相 映 成 趣 一 一 酒 贸 填 播 产品 运 豆 设计 中 动画 的 运用 


轻舟 短 棒 西 湖 好 ， 绿 水 透 筷 ， 芳 草 长 堤 ， 隐 隐 笔 歌 处 处 随 。 
一 一 «Ж 5) НА 


ТЫШЫНАН ЕН ВВА КАА, дано), РЕЗЕ f Лай, АВА y — Tuba cE, 
术 世 界 。 那 么 在 运 言 设计 中 灵动 的 动画 效果 、 精 美的 视 总 画面 是 人 否 可 以 更 加 有 趣 好 玩 地 与 用 户 建立 恨 好 的 互动 ， 吸 引用 户 的 注意 
JJ? 答案 肯定 是 姓 庸 置疑 的 。 作 为 其 中 最 让 人 印 铺 深刻 、 传 播 效 果 最 好 的 载体 ， 动 效 为 运营 设计 提供 了 更 大 的 展示 舞台 和 想象 空 
间 。 动 效 以 其 独特 的 魅力 愉悦 了 我 们 的 感官 体验 ， 让 运营 设计 在 动 与 静 、 虚 与 实 中 引 友 用 户 的 兴趣 ， 在 不 断 地 交互 中 让 用 户 停 留 
更 长 的 时 间 ， 不 断 回 来 以 实现 更 好 的 商业 价值 。 


运 豆 设计 首先 要 解决 用 户 的 基本 需求 ， 在 此 前 提 下 运用 更 加 有 趣 、 好 玩 的 设计 以 求 与 用 户 建 立民 好 的 互动 ， 吸 引用 户 的 注意 
力 。 动 效 设计 融 承 担 起 了 有 趣 好 玩 的 任务 。 当 然 动 效 设 计 的 理念 传达 和 项 目 核 心 用 户 情 景 是 分 不 开 的 ， 接 下 来 以 酒 视 直播 项 目 运 
营 设 计 为 例 ， 为 大 家 详细 讲解 一 下 动 效 在 里 面 的 应 用 。 


231 ”项目 背景 


如 果 襄 2013 年 是 互联 网 金融 元 年 ，2014 年 是 智能 硬件 元 年 ，2015 年 是 互联 网 + 元 年 的 话 ， 那 么 2016 年 无 疑 是 视频 和 直播 元 
。 直 播 之 所 以 火爆 ， 是 因为 其 满足 了 人 的 两 大 需求 : 总 识 傈 尔 蒙 的 需求 和 目 我 表现 的 需求 。 前 者 是 生理 需求 ， 后 者 是 社会 需 
， 这 两 个 点 是 直播 经 济 的 核心 驱动 力 。 视 频 直 播 相 比 于 文字 、 表 情 和 录 播 视频 而 言 ， 交 互 性 更 强 ， 社 交 效 率 更 高 ， 更 具 真 实 
、 实 时 性 ， 迎 合 了 用 户 的 心理 诉求 ， 让 内 心 孤 独 的 人 得 到 一 定 的 心理 满足 。 
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根据 直播 内 容 的 不 同 ， 我 们 将 直播 行业 分 为 三 类 : 秀 场 类 、 游 戏 类 、 泛 娱乐 类 。 迅 雷 会 员 依托 迅雷 用 户 群 与 秀 场 类 直播 先天 
契合 的 优势 ， 推 出 了 直播 产品 一 一 酒 宽 。 


这 是 一 个 全 民 互 动 的 时 代 ， 对 于 酒 贸 赴 播 而 言 我 们 从 增强 内 容 的 实时 性 、 互 动 性 及 商业 变现 能 力 出 友 。 豆 和 霹 主播 与 用 户 、 用 
户 与 用 户 乙 间 的 互动 氛围 成 为 直播 的 关键。 那 如 何 去 豆 造 直播 间 的 气氛 使 用 户 产 生 足 够 的 冲动 从 而 达成 转化 和 留存 ”我 们 对 用 户 
在 直播 则 体验 的 关键 路 径 上 的 各 个 点 做 了 探索 分 析 ， 并 进行 大 胆 尝试 ， 运 用 大 量 的 动 效 设计 增强 灵动 感 和 趣味 感 ， 从 而 营造 一 个 
多 元 化 的 秀 场 直播 氛围 ， 强 化 产品 的 情感 化 表达 ， 进 一 步 提高 体验 的 转化 。 


2.3.2 ЖАТЬ 


" 打 赏 ”是 直播 互动 的 初级 方式 也 是 目前 直播 的 主要 锰 利 方式 。 在 直播 过 程 中 ， 用 户 如 果 喜 欢 主播 的 表现 ， 可 以 通过 平台 充 
值 购买 虚拟 礼物 并 送 给 主播 ， 博 得 主播 的 开心 。 送 礼物 是 通过 符号 化 的 方式 表达 用 户 的 情感 、 想 法 ， 赠 送礼 物 的 行为 主要 可 以 满 
足 用 尸 认 可 感 、 社 交 、 东 誉 、 浪 漫 4 种 心理 动机 ，。 


在 礼物 体系 当中 ,礼物 的 价格 从 几 毛 到 上 干 不 等 。 礼 物 道 具 设 计 精 美 与 殖 ， 直 接 影响 用 户 送 礼 的 兴致 ， 因 此 我 们 在 礼物 的 外 


形 上 需要 体现 出 品质 感 ， 构 图 要 尽量 饱满 。 不 同 价格 的 礼物 ， 在 细节 的 处 理 上 和 内 容 上 要 有 所 区 分 ， 应 适当 伟大 礼物 的 质感 ， 让 
用 户 心甘情愿 的 为 虚拟 物品 买单 ， 如 图 2-38 所 示 。 


92-38 ”礼物 


92-39 ” 连 送 礼物 的 流光 动 效 


当 用 户 对 心仪 的 主播 赠 大 礼物 时 ， 动 效 融 成 为 一 种 很 重要 的 反馈 途径 。 在 礼物 的 动 效 上 我 们 运用 了 多 元 化 的 展示 方式 ， 让 用 
尸 在 刷 礼 物 的 过 程 中 得 到 更 好 体验 。 比 如 ， 所 有 的 礼物 当 用 户 在 连续 点 击 赠送 按钮 时 ， 聊 天 区 域 均 会 出 现 不 断 刷 新 数量 的 流光 特 
效 ( 见 图 2-39) ， 主 播 会 呼唤 用 尸 名 字 表 示 感 谢 ， 这 样 会 让 用 尸 同 时 在 触 完 、 视 党 、 声 狗 三 万 面 得 到 快感 ;我 们 在 赠送 按钮 六 
边 设 计 了 手动 输入 赠送 数值 ， 还 设 定 了 99 (长 长 久久 ) 、520 (我 爱 你 ) 、1314 (一 生 一 世 ) 等 一 系列 的 特殊 数值 ， 以 满足 用 
户 人 在 送礼 物 时 触 友 特 殊 数 值 动 效 ， 进 而 达到 促使 用 户 多 刷 礼 物 的 目的 。 我 们 在 特殊 数值 的 动 效 处 理 方式 上 ， 将 单个 礼物 作为 粒子 
时 位 ， 使 其 分 散 进 入 画面 并 联合 控 出 不 同 造 型 ( 见 图 2-40) ， 根 据 礼 物 数量 的 不 同 动画 时 长 也 做 了 区 别 。 对 数值 动 效 模板 化 ， 
可 以 万 便 之 后 的 内 容 拓展 。 


连 送 流光 特效 和 特殊 数值 特效 既 可 以 满足 普通 用 尸 刷 礼物 的 快感 ， 也 能 满足 土 聚 一气 干 金 的 心理 。 


图 2-40 ”数值 动 效 


当然 对 于 价格 高 的 礼物 ， 我 们 会 有 单个 全 屏 动 效 展示 ， 而 且 送 礼 人 的 名 字 会 在 直播 画面 以 跑马 灯 的 形式 出 现 ， 强 制 其 他 用 户 
围观 ， 让 用 户 沉 得 这 个 钱 伦 得 很 值得 。 那 接 下 来 我 们 拿 海洋 之 心 的 创作 过 程 给 大 家 做 一 下 分 析 ， 总 体 的 设计 过 程 如 图 2-41 所 
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图 2-41 海洋 之 心 创作 过 程 


提 到 海洋 乙 心 我 们 可 能 会 想到 电影 《泰坦 尼克 号 》 那 个 友 生 在 海上 罗 丝 和 杰克 凄美 的 爱情 故事 ， 所 以 宝石 、 爱 情 、 海 洋 融 成 
为 海洋 之 心 的 天 键 词 。 我 们 在 绘制 礼物 的 过 程 时 用 桃 心 为 基本 的 外 形 ， 颜 色 选 择 深 邃 的 蓝 色 ， 同 时 采用 透明 钻石 的 质感 ， 圆 润 精 
致 、 绚 琢 夺 目 ， 充 分 显示 礼物 具有 的 神秘 、 高 贵 、 华 丽 的 特质 ， 如 图 2-42 所 示 。 


92-42 ”海洋 之 心 


确认 外 形 之 后 ， 在 全 屏 动 画 的 处 理 上 我 们 选择 了 海洋 为 场景 ， 将 入 世 珍 宝 海洋 之 心 深 蕊 于 深海 的 贝 这 之 中 ， 海 草 、 贝 过、 成 
群 结 队 的 鱼 为 元 素 表 景 点 缀 ， 如 图 2-43 所 示 。 


图 2-43 构思 


海洋 之 心 的 动画 展现 以 贝壳 为 主体 物 。 外 界 给 予 的 神奇 能 量 聚集 到 贝 沉 中， 贝壳 瞬间 打开 ， 深 赣 色 透明 海洋 之 心 在 出 现 的 画 
面 中 闪光 着 灼 灼 光辉 ， 海 鱼 的 游 动 、 水 草 的 浮动 、 上 升 的 气泡 烘托 出 了 海底 世界 的 神奇 美妙 ， 如 图 2-44 所 示 。 将 礼物 进行 故事 
化 的 设计 ， 增 强 用 户 的 代入 感 ， 让 我 们 的 客户 乐意 化 钱 买 礼物 。 


图 2-44 海洋 之 心动 效 


贝壳 打开 展示 礼物 这 个 运动 过 程 我 们 并 不 陌生 ( 见 图 2-45) ， 那 我 们 把 这 个 知识 点 拓展 一 点 : 物体 运动 时 所 通过 的 路 径 称 
为 运动 轨迹 ( 见 图 2-46) ， 没 有 规律 性 的 运动 轨迹 会 使 运动 失去 连续 性 ， 变 得 生硬 ， 不 目 然 。 动 画 中 贝 帝 打开 的 运动 轨迹 是 以 
贝壳 根部 为 中 心 、 以 贝壳 长 度 为 半径 的 弧 线 运动 。 男 动画 时 ， 要 了 解 物体 运动 的 规律 ， 并 把 它 运用 到 正确 的 运动 轨迹 上 ， 不 要 让 
物体 的 大 小 、 形 状 友 生 畸变 ， 那 样 的 话 融 画 不 出 正确 的 运动 轨迹 了 。 


图 2-45 ”展开 过 程 


除了 冲 规 的 礼物 ， 我 们 还 设计 了 不 同 主题 的 活动 ， 小 游戏 等 以 求 市 给 主播 和 用 户 新 鲜 感 ， 同 时 可 制造 话题 。 具 体 做 法 : 根据 
当下 的 热点 、 忆 假日 等 来 策划 和 设计 ， 写 辕 不 同 的 情景 氛围 ， 满 足 多 元 化 的 诉求 ， 通 过 完成 任务 游戏 等 互动 行为 ， 形 成 连接 用 己 
一 互动 一 内 容 一 消费 行为 的 闭环 。 在 特定 活动 中 当 用 户 完 成 某 个 阶段 性 的 任务 时 给 予 适 当 的 奖励 。 比 如 在 恒星 大 作战 的 活动 
中 ， 会 有 阶段 性 任务 和 终极 任务 ， 每 集 满 一 个 星球 所 需要 的 积分 ， 则 得 到 相应 特权 或 礼物 奖励 并 会 出 现 爆 球 的 动 效 ， 这 样 的 策略 
可 以 在 这 种 长 线 的 活动 中 增加 趣味 性 和 互动 性 ， 避 免 用 尸 在 做 活动 任务 的 过 程 中 感到 枯燥 、 单 调 ， 或 因 频 繁 送礼 对 特效 产生 视 宫 
疲 芳 。 通 过 即时 、 直 接 、 互 动 的 活动 延伸 用 户 的 活动 参与 感 ， 充 分 满足 了 用 己 的 虚 采 心 。 通 过 主播 和 用 户 进 行 实时 互动 ， 可 提升 
直播 的 趣味 性 和 场景 履 兰 ， 这 也 是 这 类 活动 的 目的 。 
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92-47 爆 球 动 效 


爆 球 动 效 友 生 的 场景 在 太空 ， 视 网 的 中 心 在 恒星 上 ， 我 们 运用 黄色 加 强 恒 星 视觉 的 重点 人 位置， 旁边 由 其 他 恒星 点 绝 ， 空 间 上 
做 了 近 大 远 小 的 处 理 。 当 球 介绍 光束 能 量 爆炸 ， 恒 星 碎 片 由 远 及 近 展 现在 用 尸 眼 前 ， 空 间 感 得 到 强化 ， 使 用 己 有 身 临 其 境 的 感 
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下 面 我 们 取 其 中 的 某 一 个 动 效 的 片段 来 分 析 : 当 恒 星 受 外 力 时 ， 会 如 何 反 应 ”对 于 恒星 的 材质 ， 这 个 可 能 要 科学 家 才能 做 出 
正确 解释 ， 我 们 在 这 把 它 看 成 一 个 坚硬 的 固体 。 当 接收 到 外 界 光 效 的 瞬间 恒星 由 于 受到 巨大 光 效 往 下 的 力 ， 球 体 往 下 移动 ， 当 光 
效 不 骨 给 球体 时 ， 因 其 他 行星 、 行 星 的 牵引 力 形成 反作用 力 回 到 最 初 状 态 。 我 们 在 动画 中 常常 会 看 到 挤 压 和 伸 长 的 效果 ， 这 里 恒 
星 处 于 悬浮 的 状态 ， 没 有 其 他 的 物体 与 之 接触 ， 那 束 不 可 能 友 生 被 挤 压 的 力 。 


有 些 物 体 在 运动 中 ， 由 于 力 的 作用 会 产生 变形 ， 我 们 大 致 将 这 种 变形 分 为 压缩 和 伸 长 。 在 现实 生活 中 融 仓 在 这 样 的 现象 ， 但 
与 现实 相 比 ， 在 动画 表现 上 应 更 加 夸张 以 达到 趣味 生动 的 效果 。 我 们 以 弹 球 为 例 ， 分 析 压 缩 与 伸 长 的 运用 ， 如 图 2-48 所 示 。 


图 2-48 压缩 与 伸 长 


反弹 分 下 沙 、 撞 击 、 上 升 三 个 过 程 ， 球 的 运动 轨迹 为 “抛物 线 ”。 上 反弹 时 ， 下 沙 为 加 速 ， 上 升 为 减速 ， 在 球 撞击 地 面 时 ， 被 
挤 压 变局 ， 这 惑 是 “压缩 ”， 如 图 2-49 所 示 。 


力 的 施加 万 同 


伸 长 ”的 瞬间 


92-49 ” 弹 球 运动 分 析 


物体 的 运动 由 环境 、 物 体 (材质 、 形 状 、 重 力 ) 、 万 向、 速度 这 些 要 素 交 织 决定 的 。 我 们 只 有 充分 考虑 这 些 要 素 才 能 画 出 更 
好 的 动画 。 


23.3 ”座驾 入 场 特 效 


在 酒 贸 直 播 中 按照 会 员 的 级 别 会 有 不 同 档次 的 座 轨 入 场 效果 。 在 汽车 入 场 动画 的 设计 中 ， 对 于 汽车 入 场 的 速 硫 分 配 我 们 做 了 
这 样 的 处 理 : 在 进 场 时 ， 确 保 汽 车 处 于 最 大 速率 。 这 样 的 运动 效果 会 显得 非常 目 然 ， 因 为 物体 在 进 场 前 便 开始 了 运动 ， 而 不 是 进 
场 时 才 开 始 运 动 。 入 场 后 在 画面 中 做 3 ~ 5 秒 的 停留 ， 目 的 是 引起 用 户 的 围观 。 出 场 时 ， 则 是 汽车 从 启动 开始 ， 然 后 加 速 出 场 。 


物体 运动 时 ， 其 速度 并 不 一 定 忌 是 相同 的 ， 车 辆 开始 运动 时 很 慢 ， 和 车 是 逐渐 提速 的 ， 中 途 最 快 ， 停 车 时 由 于 惯性 的 作用 车 得 
逐渐 减速 ， 最 后 完全 停 下 来 ， 如 图 2-50 所 示 。 灵 活 的 加 速 、 温 和 的 减速 ， 这 样 的 动 效 让 用 户 感 到 目 然 且 愉 忱 。 在 画 动 画 时 ,我 
们 要 根据 实际 情况 进行 加 速 或 减速 的 调节 ， 不 能 随意 画 。 


局 动 ( 加 速 ) 最 快 停止 ( 减速 ) 


| 


汽车 原型 


图 2-50 运动 速度 分 配 


234 趣味 功能 点 动 效 


用 户 在 直播 间 聊 天 、 起 哄 、 和 争奇斗艳 时 ， 聊 天 表情 可 增加 表达 的 趣味 性 ， 更 能 丰富 情感 的 传达 。 在 酒 侦 我 们 以 猫 为 原型 ， 制 
作 了 一 系列 最 常用 的 表情 ， 从 而 活跃 直播 场景 的 互动 ， 让 直播 的 过 程 惊 喜 不 断 ， 如 图 2-51 所 示 。 


图 2-51 ”聊天 表情 


虽然 我 们 的 产品 、 交 互 、 设 计 等 人 员 都 在 努力 地 把 产品 打造 得 更 加 优秀 ， 但 是 轧 会 因为 一 些 无 法 避免 的 问题 或 者 BUG 等 造 
成 我 们 的 产品 体验 感 下 降 ， 这 时 适当 增加 一 举动 效 可 以 弥补 出 现 问题 时 的 不 适 体验 ， 比 如 让 等 待 变 得 愉快 。 面 对 等 待 ， 我 们 总 是 
缺少 耐心 。 一 个 有 趣 的 loading 可 减少 用 户 烦 躁 感 ， 让 等 待 变 成 愉 局 的 消 让 。 图 2-52 所 示 是 酒 施 宛 值 优 惠 活 动 的 loading， 我 们 
运用 小 猫 追赶 钱币 的 小 镜头 表达 优惠 马上 残雪 到 手 的 合 义 ， 让 用 尸 可 以 在 等 待 中 得 到 视线 停留 的 享受 。 这 些 趣味 的 动 效 应 用 能 让 
人 眼前 一 亮 。 与 充 态 的 图 片 相 比 ， 动 态 图 好 比 画 龙 点 睛 的 一 笔 ， 为 运营 设计 增加 诸多 趣味 。 


图 2-52 ”充值 优惠 活动 的 loading 


上 述 loading 涉 及 跑步 的 设计 。 跑 步 是 日 常生 活 中 经 常 看 到 的 动作 ， 像 走路 一 样 ， 跑 步 的 动作 要 自然 ， 这 需要 正确 理解 这 种 
运动 方式 ， 如 图 2-53 所 示 。 


图 2-53 ”跑步 过 程 


与 走路 最 大 的 不 同 点 企 于 ， 跑 步 有 双 脚 完全 离开 地 面 ， 也 残 是 腾空 的 动作 。 那 么 跑步 为 什么 有 腾空 的 动作 呢 ? 这 是 因为 跑步 
比 走路 有 更 强 的 推动 力 。 比 如 图 2-53 所 示 ， 为 了 完成 C 使 劲 蹄 路 地 面 的 动作 ， 在 其 之 前 ， 需 要 有 积蓄 力量 的 动作 ， 也 残 是 B 的 动 
作 ， 腾 空前 后 是 A 和 E 的 动作 。 上 述 这 些 画 面 束 构 成 了 跑步 的 过 程 。 跑 步 中 ， 推 进 力 产生 强烈 跨 踏 地 面 的 动作 ， 就 是 C， 这 个 动作 
在 跑步 动作 中 是 非常 重要 的 。 


2.3.5 ЎЛА 


小 小 的 直播 间 里 承载 了 上 百 种 动 效 ， 通 过 动 效 的 运用 使 得 酒 宽 的 直播 间 热 闸 非 几 ， 高 效 的 有 反馈、 流畅 的 过 渡 ， 市 给 用 尸 更 恰 
避 的 体验 ， 也 更 细腻 地 表达 了 直播 的 情绪 和 和 气质， 提高 了 用 户 的 留存 。 多 元 化 的 互动 万 式 促进 了 用 户 充 值 ， 实 现 了 更 好 的 商业 价 
(B. 


动 效 设 计 是 小 仪 俩 ， 但 是 它 在 用 尸体 验 设 计 中 的 作用 是 不 可 估量 的 。 在 运营 类 的 设计 中 ， 动 画 的 应 用 可 以 是 微妙 的 界面 转 
场 ， 也 可 以 是 开门 见 山 、 清 晰 直观 的 礼物 展示 。 动 画 效果 让 事物 具有 了 生命 力 。 但 我 们 同时 要 探讨 一 个 重要 的 问题 : 什么 时 候 才 
能 使 用 它们 ? 动画 可 能 是 非常 讨 I5 的 设计 手段 ， 它 有 用 ， 但 并 非 适 用 于 每 一 个 运营 设计 项 目 。 使 用 动画 最 重要 的 标准 是 一 定 要 服 
从 用 尸体 验 。 视 完 的 传达 万 式 是 多 样 的 ,不论 用 什么 样 的 外 皮 去 浅 改 已 ， 让 用 尸 在 有 限 的 时 间 内 感受 到 设计 师 营 造 的 氛围 ， 获 得 
最 有 价值 的 信息 从 而 实现 转化 ， 才 是 最 终 目 的 。 


24 WEB DESIGN 吸 睛 有 道 一 一些 方法 教 你 玩 转 活动 运营 设计 


241 ” 运 襄 活动 页 设计 的 五 个 关键 操 


网 站 的 活动 设计 应 该 算是 网 页 视 党 设计 师 的 必修 课 ， 应 该 也 算是 基本 功 。 它 所 需要 的 设计 理论 都 是 最 基本 的 ,但 同时 也 是 最 
重要 的 。 设 计 理 论 版 本 多 如 牛 毛 ， 这 里 仪 仪 整理 几 个 方面 来 分 析 网 页 活动 设计 的 一 些 亡 法 。 


设计 理论 每 人 都 或 多 或 少 燥 道 一 些 。 每 个 网 站 针对 的 用 户 都 不 同 ， 在 了 解 目 己 所 针对 的 用 户 特 性 之 后 ， 我 们 做 设计 融会 更 有 
针对 性 ， 作 品 的 创意 也 会 更 贴近 用 户 情 景 。 在 这 里 我 会 分 五 个 方面 来 分 析 运 车 活动 页 设计 。 


1 .版式 设 计 


版 式 设 计 应 该 算是 最 基本 的 设计 ， 这 个 解释 起 来 比较 简单 ， 说 到 底 束 是 对 于 文字 内 容 和 配 图 之 间 关 系 进行 把 控 ， 不 过 想 要 运 
用 得 好 还 是 需要 下 很 多 工夫 的 。 严 谨 的 版 式 设计 更 适用 于 官网 或 文字 居多 的 产品 介绍 页 等 ; 活 泌 、 轻 松 的 版 式 则 更 适用 于 日 常 营 
收 类 活动 页 。 


版 式 设计 首先 是 文字 平衡 设计 ， 文 字 、 图 像 等 要 素 在 空间 上 分 布 基本 是 均匀 的 ， 明 智和 有 条 理 地 使 用 字体 是 非常 重要 的 。 虽 
然 有 成 干 上 万 的 字体 ， 但 你 真 的 能 用 的 只 是 一 小 部 分 (要 想 用 更 多 ， 人 至 少 要 等 到 主要 的 浏览 器 完全 支持 CSS3) 。 所 以 请 大 家 坚 
持 使 用 网 页 安全 字体 。 目 前 的 主流 网 页 用 得 较 多 的 两 种 字体 是 中 文雅 黑 和 瑞 文 arial， 如 图 2-54 所 示 。 


找 定 牙关 
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图 2-54 ”我 是 雅 黑 


中 文雅 黑 和 arial 称 为 无 桂 绪 字体 ， 它 们 具有 没有 边 角 的 修饰 、 看 起 来 很 整齐 光滑 、 没 有 毛刺 等 特点 。 比 较 适 合用 在 网 页 中 ， 
让 浏 贞 者 获取 大 量 的 文字 信息 而 不 会 疫 秀 。 在 开始 网 页 排版 时 ， 需 要 考虑 你 的 用 户 的 实际 使 用 习惯 。 同 一 个 网 页 ， 在 笔记 本 上 和 
在 手机 上 使 用 时 ， 字 体 大 小 残 不 应 该 相同 ， 因 为 电脑 屏幕 大 且 分 辨 率 局 ， 而 且 视 距 通 单 比较 近 而 且 固 定 ; 手机 等 屏幕 小 且 分 辩 率 
较 低 ， 应 保持 字体 的 一 致 性 ， 但 标题 和 段落 的 内 容 看 起 来 要 有 所 不 同 。 使 用 空 日 ， 调 整 行 局 、 字 体 大 小 和 字母 间距 属性 ， 可 使 用 
户 轻 松 愉 快 地 阅读 内 容 ， 这 融 是 文字 平衡 。 

行距 是 影响 易 读 性 非 钊 重要 的 因素 ， 过 宽 的 行距 会 让 文字 失去 延续 性 ， 影 啊 阅 读 ;， 而 行距 过 窒 ， 则 容易 出 现 跳 行 ， 如 图 2- 
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在 一 个 网 站 中 ， 文 字 的 大 
小 是 用 户 体验 的 一 个 重要 
部 分 ， 随 着 网 页 设计 潮流 
的 不 断 变化 ， 文 字 大 小 上 


在 一 个 网 站 中 ， 文 字 的 大 小 


是 用 户 体验 的 一 个 重要 部 分 . 
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图 2-55 ”行距 影响 阅读 示意 


例如 ， 图 2-56 所 示 页 面 是 来 目 日 本 关于 肯德基 新 品 推广 的 活动 页 ， 整 个 页 面 看 起 来 更 像 是 一 个 三 折 页 包 打 开平 铺 在 网 站 
里 。 不 过 页 面 里 设计 师 对 于 主 标题 、 内 容 和 配 图 的 排版 做 得 恰到好处 ， 中 旧 用 近似 配 图 的 颜色 隔 开 了 ， 从 而 使 整个 页 面 显得 更 有 
节奏 感 。 整 个 设计 用 了 KFC 的 标准 红 来 贯穿 页 面 ， 用 尸 在 全 屏 观 看 的 时 候 也 不 会 完 得 凌 散 。 
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ТЕТЫ =) ESE ИЕЛИ Е, ВЧЕНУ “##495D4, Вел", ТТЕ Е, saln-482tíJ Ea Ei. 
运用 空格 ， 以 及 改变 行 间距 、 字 间距 等 制造 一 些 变化 的 效果 。 除 了 物品 大 小 的 对 比 关 系 外 ， 还 可 以 运用 近 大 远 小 的 对 比 关 系 。 大 
小 的 对 比 可 以 产生 视 完 落 才 。 人 们 的 视线 很 容易 先 被 大 的 或 密集 的 物体 的 吸引 。 某 种 程度 上 ， 密 集 的 物体 等 同 于 大 的 物体 。 


视 党 藻 磊 会 产生 动态 ， 也 就是 说 ， 你 先 看 到 网 页 上 的 大 物体 后 ， 视 线 才 转移 到 其 他 位 置 ， 故 大 的 物体 束 是 画面 的 重心 了 。 留 
日 也 不 是 刻意 留 日 ， 高 明 的 留 日 要 非常 目 然 ， 好 像 现实 生活 中 本 来 就 是 那个 样子 的 ， 从 而 使 页 面 内 容 不 突 几 ， 很 和 谐 ， 如 图 2- 


57 和 图 2-58 所 示 。 


图 2-57 页 中 的 排版 运用 (一 ) 
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图 2-58 页 中 的 排版 运用 (=) 


2 色彩 设计 


这 里 的 色彩 设计 并 不 是 对 色彩 理论 的 解释 ,也 不 是 对 色彩 感 完 的 解释 。 这 里 只 说 三 个 色彩 设计 原则 : 色彩 对 比 、 色 彩 范 围 的 
大 小 与 形状 、 色 彩 位 置 。 这 三 种 原则 用 在 网 页 上 的 例子 很 多 。 当 然 ， 色 彩 设计 原则 还 有 色彩 的 互补 色 、 对 比 色 、 色 过、 色温 等 


等 。 大 家 可 以 上 网 搜索 相关 的 教程 或 者 买 基 本 色彩 搭配 的 书籍 看 看 。 


图 2-59 所 示 是 韩国 某 棒 球 游 戏 的 活动 页 ， 页 面 中 用 了 大 面积 的 芮 、 深 灰 对 比 ， 不 仅 能 让 画面 有 足够 的 视觉 冲击 力 ， 还 能 很 
好 地 区 分 阅读 区 域 。 
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图 2-60 所 示 是 一 个 介绍 某 本 书籍 的 网 页 。 因 为 书籍 本 身 就 是 以 紫色 、 检 色 为 主 ， 所 以 设计 师 在 设计 这 个 页 面 时 用 了 大 面积 
的 樟 黄 亮色 再 配 上 互补 的 紫色 ， 使 得 画面 具有 极 强 的 视觉 冲击 。 这 种 风格 其 实 跟 上 面 说 的 版 式 设计 有 点 像 ， 因 为 设计 中 已 经 用 了 


大 面积 的 高 对 比 的 颜色 ， 所 以 在 配 图 和 字体 上 可 能 要 求 束 相对 弱 一 点 ， 不 然 都 是 重点 、 突 出 点 ， 男 面 有 反而 没 亮 民 了 。 


FOX Lite Rebrand, in а BooK 


ТНЕ РЕС 


STAGES OFWORK 


92-60 页 中 的 色彩 运用 


要 掌握 “色彩 平衡 ”的 应 用 原理 ， 兽 先 要 了 解 补 色 。 补 色 是 指 一 种 原色 与 另外 两 种 原色 竟 合 而 成 的 颜色 形成 的 互相 补充 的 关 
ж. И: 蓝 色 与 绿色 混合 出 青色 ， 育 色 与 红色 为 补 色 关系 。 


那么 色彩 平衡 的 原理 具体 是 什么 ”看 图 2-61 所 示 的 色彩 平衡 图 ， 人 在 Ps 中 ， 当 你 用 色彩 平衡 的 时 候 ， 你 增加 红色 ，Ps 会 目 动 
降低 青色 ， 以 保证 色 阶 值 为 256。 并 不 是 所 有 的 图 像 每 种 颜色 色 阶 都 会 到 达 256 那 么 高 ， 比 如 你 现在 的 图 中 ， 若 红色 色 域 只 到 
100， 那 么 你 用 色彩 平衡 ， 比 如 增加 了 80 的 红色 ， 那 么 青色 会 上 自动 降 到 20， 以 保证 图 像 的 原始 颜色 的 色 域 。 这 束 是 所 谓 色 彩 平 
(Š, 
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图 2-61 ЗЁМА 


З.В] УИ 

襄 到 创意 ， 应 该 是 设计 师 最 擅长 的 ， 但 肯定 也 是 他 们 最 头疼 的 问题 。 如 何 评判 一 个 创意 的 好 坏 ? 借用 周杰伦 的 一 句 话 “了 哎 
哆 ， 不 错 哦 ”， 当 别人 看 到 你 的 页 面 的 时 候 ， 能 友 出 这 种 感慨 ， 那 基本 上 你 的 这 个 页 面 应 该 是 做 到 位 了 。 

随 着 移动 端 装 备 越 来 越 好 、VR 越 来 越 触 手 可 及 ， 现 在 的 设计 师 已 经 不 满足 于 一 个 简单 的 2D 场 景 或 者 平面 视 达 了，C4D、 
AE、Flash 这 些 软件 似乎 能 让 设计 师 们 在 页 面 上 上 友 挥 出 更 多 的 创意 ， 如 图 2-62 和 图 2-63 所 示 。 


92-62 ”C4D 作 品 


92-63 ”在 页 中 运用 C4D、Flash 


4 趣味 、 情 感 类 设 i 


趣味 、 情 感 设 计 是 指 以 人 与 物 的 情感 交流 为 目的 的 创作 行为 。 设 计 师 通 
元 素 进 行 整合 。 让 页 面 可 以 通过 声音 、 形 人 态 、 宽 意 等 来 影响 用 户 的 听 党 、 


所 示 。 


过 设计 手法 ， 对 页 面 的 颜色 、 质 感 、 布 局 、 操 线 面 等 


Л, ЙД 


情感 化 i 


股 计 示 意 如 图 2-64 


何 为 情感 ? 
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在 网 页 设计 中 ， 情 感化 设计 也 是 无 处 不 在 的 ， 设 计 师 用 图 片 和 颜色 来 表现 丰富 的 情感 ， 甚 至 赋予 页 面 不 同 的 情感 ， 比 如 喜 
а. ЯЕ... АУД НАЕ АИТ. 


图 2-65 所 示 为 迅雷 离线 下 载运 营 活 动 ， 该 活动 页 束 改 变 了 以 往 简 单 介绍 产品 功能 的 传统 推广 模式 ， 而 是 模拟 深夜 场景 : 把 
家 里 的 电脑 比 作 有 情感 的 人 ， 长 时 间 使 用 后 电脑 温度 过 高 ， 温 度 计 的 使 用 提示 你 需要 关机 休息 了 ; 下载 冷漠 资源 用 了 比较 冷 的 色 
调 ， 用 跨栏 比喻 下 载 的 难度 ; 下载 失败 的 场景 则 用 了 红色 来 表现 。 小 人 泪 立 的 模样 符合 失败 的 心理 特征 。 


mu а= mam. | ¿ms 


JE BE: ШЕЙ 
一 ЧЫ 


92-65 迅雷 会 员 离 线 下 载 


我 们 在 生活 中 人 处 处 都 在 使 用 情感 化 设计 ， 比 如 在 电子 邮件 、 短 信和 社交 媒体 中 进行 交流 时 ， 每 天 友 出 去 的 那么 多 表情 符号 ， 
可 以 让 别人 清楚 地 了 解 我 们 的 感受 ， 而 这 束 是 情感 化 UI 的 一 种 呈现 形式 。 


如 图 2-66 所 示 ， 迅 雷 设计 的 这 一 套 雷 乌 表 情 符号 非 名 生动， 用 尸 在 聊天 界面 进行 交流 时 ， 会 逐步 引起 一 系列 生理 感觉 和 情 
感 ， 而 这 些 是 用 户 需要 宣泄 的 。 从 视 党 上 来 看 ， 使 用 面部 表情 来 表达 所 需要 的 情感 是 最 好 的 方法 。 人 的 面部 所 能 承载 的 情感 对 于 
用 户 而 言 更 容易 判断 也 更 容易 航 接受 ， 所 以 这 样 的 图 片 也 有 着 更 为 明显 的 效力 。 当 然 ， 其 中 最 重要 的 事情 人 在于， 真正 触 友 情感 的 
是 你 的 内 容 与 相应 的 设计 ， 这 些 是 你 所 讲 故 事 的 核心 部 件 。 


图 2-66 БАЖ 


在 readme 登 录 页 面 ( 见 图 2-67) ， 当 你 输入 密码 时 ， 上 面 硼 明 的 猫 头 座 会 到 住 目 己 的 眼睛 ， 从 而 在 输入 密码 的 过 程 中 给 用 
户 以 安全 感 ， 让 用 户 直 接 体验 到 关怀 感 ，“ 卖 是” 的 形象 还 能 减少 用 尸 企 登 录 时 的 负面 情绪 。 这 种 情感 化 的 设计 很 好 地 抓 住 了 和 人 


对 丁 物 的 同情 心 和 对 隐私 的 敏感 ， 是 很 棒 的 设计 。 


图 2-67 readme 8 ДЕ 


又 例如 页 面 里 把 各 种 元 素 男 在 纸 上 并 勇 切 搭建 好 ， 再 用 相机 担 摄 处 理 成 页 面 的 头 部 Banner， 这 样 融 有 了 足够 的 页 面 个 性 和 
设计 趣味 性 ， 如 图 2-68 所 示 。 这 种 手法 还 经 单 出 现在 H5 页 面 里 ， 加 上 动 效 惑 更 有 趣 、 生 动 了 。 还 有 一 些 有 趣 的 页 面 是 基于 配 
图 、 插 图 体现 的 ， 这 类 情况 不 需要 给 页 面 增加 过 多 的 元 素 ， 如 图 2-69 所 示 。 
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图 2-68 ”案例 分 析 
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2-69 ”案例 欣赏 
趣味 、 情 感 类 设计 更 多 的 是 一 种 杀 切 感 ， 并 不 是 所 有 的 页 面 都 要 求 有 ， 但 是 偶尔 为 之 ， 会 让 页 面 添 色 不 少 。 
5. 模 拟 实 物 、 打 破 常 规 、 制 造 空间 


模拟 实物 和 营造 空间 气氛 这 类 设计 出 现在 游戏 类 网 页 中 比较 多 ， 这 样 做 很 容易 把 用 户 市 进 活动 氛围 ， 相 关 案 例 欣 赏 如 图 2- 
70~ 图 2-72 所 示 。 
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2-71 МЕХОМ ЛК (=) 
活动 页 设计 的 方法 其 实 可 以 有 很 多 种 ， 天 键 还 是 在 于 目 己 去 上 友 现 、 探 索 。 不 过 任何 一 种 设计 形式 都 离 不 开 三 个 步骤 : 
1) 设计 版 面 、 标 题 形式 。 
2) 6, 221. БИЕ. КЕЕ, 


3) ЗЕЛЕ, кай (气氛) 、 质 感 、 纹 理 、 整 体 调 整 。 


图 2-72 ”游戏 活动 页 案例 欣赏 


6. 案 例 一 : БЕ, 


活动 “最 萌 雷 乌 ” 是 为 了 更 好 地 在 线 上 销售 第 二 代 亩 乌 公 仔 而 设计 的 活动 页 。 其 实 设 计 中 心 每 年 都 会 出 不 少 迅 雷 周 边 设计 ， 
有 的 是 为 活动 销售 设计 的 ， 有 的 是 为 了 回馈 高 等 级 迅雷 用 户 设计 的 。 雷 鸟 公仔 实物 如 图 2-73 所 示 。 


273 ” 雷 乌 公仔 


设计 活动 页 很 多 设计 师 习 惯 从 主题 字 开 始 入 手 。 前 期 通过 跟 需 求 方 的 沟通 和 活动 页 类 型 的 理解 基本 能 拿捏 到 主题 字 的 风格 。 
然后 我 们 开始 对 标题 文案 进行 设计 、 变 形 、 丰 语 细 证 等 处 理 。 考 虑 到 页 面 是 卖 迅 雷公 仔 ， 故 偏 可 爱 风格 ， 所 以 在 字体 设计 会 偏向 
于 圆润 〈 后 面 章节 会 具体 介绍 如 何 进行 字体 设计 ) ， 如 图 2-74 所 示 。 


图 2-74 ”主题 字 的 草图 和 完成 稿 


对 手绘 好 的 主题 字 扫描 或 者 担 照 并 放 进 Al 或 Ps 里 调 到 ?0% 的 透明 大 ， 然 后 进行 勾 边 、 配 色 ， 做 成 天 量 文 字 (小 技巧 : 做 成 
矢量 文件 的 好 处 就 是 放大 缩小 时 不 用 担心 文字 会 变 虚 ) 。 


然后 进行 参考 配色 、 添 加 场景 元 素 ， 如 图 2-75 所 示 。 
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图 2-75 ”色彩 参考 


在 确定 好 配色 之 后 我 们 开始 添加 背景 素材 和 为 形状 上 色 ; 接着 配色 、 添 加 标题 ; 在 背景 做 完 乙 后 我 们 陆续 开始 添加 标题 文案 
并 且 进 行 配色 。 


最 后 对 页 进行 丰富 ， 比 如 添加 内 容 、 点 缀 元 素 。 图 2-76 和 图 2-77 所 示 为 最 终 页 面 效果 ， 不 过 页 面 稍稍 有 点 儿 长 ， 故 只 能 放 
一 部 分 出 来 给 大 家 看 看 了 。 


2-76 “ЖА” Ба 


图 2-77 ЖЕ жард И 


7. 案 例 二 : 迅雷 网 游 加 速 器 年 终 大 回馈 


如 图 2-78 所 示 ， 这 是 一 个 关于 迅雷 网 游 加 速 器 年 终 大 回馈 的 活动 页 ， 因 为 内 容 和 文字 信息 并 不 是 很 多 ， 所 以 友 挥 空间 相对 
来 说 要 大 一 些 。 在 接 到 需求 的 时 候 设 计 步 又 还 是 大 致 分 为 三 步 : 


1) 设计 版 面 、 标 题 形式 ,; 
2) КЕ, 2251. БИЕ. ЕА; 


3) Еа, кай (气氛) 、 质 感 、 纹 理 、 整 体 调 整 。 
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图 2-78 ”网 游 加 速 器 年 终 大 回 锁 活 动 页 


考虑 到 需求 万 是 跟 游戏 相关 的 ， 所 以 在 版 式 构图 上 面 会 大 胆 一 点 ， 整 个 页 面 几 乎 一 屏 残 能 展示 完 。 先 是 主题 字 ， 这 里 设计 了 


笔画 比较 夸张 的 字体 ， 特 意 放 大 有 某 些 笔画 以 增加 主题 的 对 比 ， 让 主题 在 整个 画面 里 更 突出 。 主 要 信息 则 设计 在 一 个 红包 的 样式 
中 ， 红 包 是 红 禁 暖色 系 的 ， 其 他 周围 的 配色 则 选用 了 蓝 紫 等 偏 冷 的 颜色 ， 这 样 的 冷暖 对 比 更 能 衬 出 中 间 需 要 展示 的 信息 。 


天 于 配 图 ， 事 先 也 容 询 过 需求 万 ， 因 为 跟 游 戏 公 司 都 是 有 合作 关系 的 ， 所 以 在 配 图 、 元 素 上 可 以 放心 使 用 ， 不 用 担心 版 权 问 
题 。 这 里 选用 了 一 个 剑 灵 的 游戏 角色 ， 这 种 原画 和 矢量 感 的 搭配 丈 有 一 点 情感 化 、 趣 味 性 的 设计 在 里 面 ， 不 会 让 页 面 显 得 过 于 游 
戏 化 ， 毕 葛 它 是 一 个 年 终 大 促 、 回 馈 用 尸 ， 有 相对 杀 民 一 点 的 需求 ， 所 以 在 风格 画面 上 还 是 避免 太 过 氏 瞳 或 者 高 冷 。 


设计 过 程 中 的 小 提示 : 对 于 图 层 的 整理 也 是 一 种 设计 ， 是 对 图 层 结构 的 一 种 思考 ， 它 不 仅 有 利于 清理 设计 完稿 后 无 用 的 设计 
元 素 和 图 层 ， 还 可 以 提高 整个 工作 流程 中 协同 修改 的 作用 。 当 你 拿 到 同事 的 文件 ， 并 被 眼前 井井有条 的 图 层 结构 所 吸引 时 ， 立 马 
找到 相关 的 元 素 ， 这 时 你 会 感叹 “ 哇 ! 好 专业 的 psd”， 如 图 2-79 所 示 。 
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图 层 整 理 的 3 大 好 处 : 


1) 梳理 设计 并 删除 多 余 元 素 。 


2) 在 最 终 完稿 后 ， 要 对 该 文件 中 的 图 层 进 行 必要 的 梳理 和 分 组 ， 分 组 建立 图 层 组 的 最 大 意义 就 在 于 逐一 删除 页 面 中 多 余 的 
图 层 ， 使 呈现 在 页 面 上 的 设计 更 简洁 和 实用 ; 在 重 构 或 者 同事 接手 项 目 时 可 以 给 出 清晰 的 设计 稿 。 


3) 在 柄 理 图 层 时 ， 可 以 发现 设计 过 程 中 有 意 或 无 意 添 加 的 重复 、 无 用 的 元 素 或 图 层 。 删 除 它 们 融 是 对 设计 作品 的 简洁 化 整 
理 ; 不 存在 多 余 图 层 ， 使 每 个 图 层 都 有 存在 的 意义 。 


242 ”和 运 豆 活动 页 中 信息 的 中 心 一 Es 


主题 字 在 活动 页 或 者 Banner 中 通常 都 不 会 保留 原 字体 ， 多 少 都 会 动 一 动 字体 的 某 些 笔画 或 者 局 部 结构 ， 使 主题 字 更 加 的 形 
象 、 有 趣 、 酷 烽 ， 所 以 字体 设计 束 尤 为 重要 了 。 另 一 方面 是 用 原 字体 是 会 侵权 的 。 


1. 字 体 的 “前 世 今 生 " 


在 当今 科技 高 速 友 展 的 时 期 ， 信 息 的 传播 和 交流 的 媒介 更 加 科学 化 ， 而 文字 作为 古老 的 信息 传播 载体 ， 它 的 存在 对 于 人 类 的 
上 友 展 有 着 巨大 作用 。 纵 观 世 界 各 国 的 文字 ， 无 论 是 外 文字 母 还 是 中 国 汉 字 ， 都 是 源 于 图 形 。 人 们 为 了 记录 目 己 的 思想 、 活 动 、 成 
融 ， 开 始 利用 图 画作 为 记录 手段 ， 但 是 图 画 对 于 思想 的 表达 非 钊 有 有限， 特别 是 对 于 比较 抽象 的 思维 表达 ， 几 乎 无 能 为 力 ， 因 此 文 
字 应 运 而 生 ， 也 残 是 痪 是 图 形 孕 育 了 文字 。 大 家 都 知道 最 早 的 汉字 是 甲骨 文 。 甲 骨 文 具有 会 意 、 指 示 等 特点 ， 这 种 特点 和 平面 设 
计 一 样 ， 是 供 人 识别 的 。 甲 骨 文 是 一 种 传播 信息 的 平面 图 形 ， 其 实现 了 文字 记忆 、 抒 情 、 审 美 等 文化 功能 。 图 像 化 的 文字 具有 传 
递 信息 快 的 特点 ， 通 过 颜色 、 形 状 、 色 彩 、 质 感 等 方式 ， 将 要 表达 的 信息 传达 给 他 人 ， 让 他 人 识别 、 记 忆 并 对 其 产生 影响 。 


2. 图 形 语言 的 特征 
图 形 语言 在 情感 信息 传达 上 具有 以 下 几 个 特征 : 
` 直观 性 和 生动 性 : 图 形 语言 在 信息 传播 中 以 简洁 真实 、 直 观 生 动 的 形象 承载 厦大 量 的 信息 。 


` 个 性 化 和 象征 性 : 简洁 生动 的 图 形 除 了 直接 表述 主题 外 ， 还 传达 一 种 深层 次 的 精神 内 涵 ， 受 众 对 于 图 形 信 息 的 正确 认识 需 
要 与 视觉 经 验 信 息 联 系 起 来 。 


说 服 性 和 感染 性 : 想 要 说 服 别人 接受 茶 种 思想 观念 时 ， 最 好 的 方式 莫 过 于 用 事实 说 话 ， 将 其 展示 出 来 。 创 意图 形 的 构图 、 
色彩 能 够 直接 刺激 人 的 眼球 和 大 脑 ， 感 染 人 的 情绪 。 如 红色 让 人 兴奋 ， 产 生食 欲 ; 蓝 色 让 人 安静 ， 产 生 遐 想 ; 黄色 代表 了 刺激 和 
危险 等 。 而 当面 对 一 些 比较 抽象 的 字义 时 ， 我 们 可 以 选择 它 的 同义词 ， 或 者 与 之 相关 联 的 具象 的 实物 、 图 形 来 展示 ， 这 样 受众 理 
解 起 来 就 会 明确 很 多 。 
3. 字 标 设 计 的 要 素 

字 标 设计 的 要 素 如 下 : 


` 独特 性 : 标志 必须 要 有 其 独特 性 ， 容 易 使 公众 认 知 及 记忆 ， 留 下 深刻 印象 。 如 果 涉 及 的 字 标 和 别 的 同类 型 标识 相 比 没有 独 


特性 ， 那 这 个 字 标 就 一 定 是 失败 的 。 
准确 性 : 也 就 是 反应 内 容 的 准确 度 ， 要 紧 紧 把 握 住 需求 方 的 特质 特点 。 


ЗЕМЛЕ: 指 的 是 能 在 各 种 尺寸 的 页 面 上 显示 ， 做 广度 展开 时 形状 也 能 清晰 可 见 。 一 个 好 的 字 标 不 单 要 在 网 络 媒体 上 适用 ， 
同样 也 要 在 印刷 品 上 能 够 很 好 地 展现 。 这 里 涉及 字体 在 设计 时 的 笔画 、 字 宫 、 字 距 等 一 系列 细 闻 。 


4. 字 标的 类 型 
(1) 具象 型 


具象 型 捐 字 形 里 会 穿插 很 多 和 该 字 表 面 意思 相关 的 物件 ， 以 此 让 人 第 一 眼 融 能 加 深 和 了 明确 该 LOGO 所 要 表达 的 意思 。 这 也 是 
大 家 最 单 用 的 类 型 ， 基 本 上 一 个 字 标 其 实 最 多 能 出 现 的 元 素 只 能 有 两 个 。 再 多 的 话 我 们 会 顾 此 失 役 ， 在 做 字 的 时 候 放 进去 大 量 的 
元 素 ， 会 忽视 字体 本 身 作为 标识 的 结构 笔画 问题 ， 这 样 会 造成 LOGO 更 像 是 一 个 图 而 不 是 一 个 字 ， 反 倒影 响 了 字形 的 识别 度 。 具 
象 型 字体 示意 如 图 2-80 所 示 。 


(2) 手绘 型 


手绘 型 字体 以 手绘 的 形式 来 表现 ， 具 有 不 规则 性 ， 通 单 更 有 上 魄力 ， 如 图 2-81 所 示 。 


图 2-80 具象 型 字体 示意 


图 2-81 手绘 型 字体 示意 


(3) 几何 型 


几何 型 字 标 在 结构 和 笔画 上 比较 规整 ， 奶 求 对 称 感 劳 和 结构 感觉 ， 可 以 有 委 形 、 方 形 、 梯 形 等 多 种 形式 的 变化 ， 如 图 2-82 
所 示 。 


(4) 流线型 


流线型 字体 设计 上 追求 线条 流畅 和 靳 移 ， 这 种 字体 多 用 于 偏 女 性 化 或 中 性 化 的 内 容 中 。 


除 此 上 述 字形 之 外 还 有 回 线 型 、 结 构 错落 型 等 。 其 实 一 种 字 的 类 型 有 时 候 并 不 单一 ， 可 以 对 多 种 类 型 进行 结合 来 创作 。 


5. 实 例 一 : “音乐 亚洲 


拿 到 一 个 字体 设计 的 需求 后 ， 首 先 要 做 的 束 是 分 析 需 求 ， 如 图 2-84 所 示 。 


标题 : “音乐 亚洲 ” 上 国 关键 字 : 音乐 、 国 际 
Ф 思考 : 1. 音 乐 元 素 ? 


2.27299 ? 
3. 网 站 还 是 印刷 ? 


图 2-84 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (一 ) 
根据 不 同 的 方向 制定 不 同 的 计划 ， 是 我 们 在 实际 制作 之 前 必须 考虑 的 。 那 么 ， 接 下 来 我 们 就 开始 实际 制作 了 : 


1) 选 一 种 已 有 的 字体 作为 设计 参考 外 形 ， 同 时 确定 单个 字 的 长 宽 比 例 (以 框 裁定 ) ， 定 好 字体 笔画 粗细 比例 ， 如 图 2-85 所 


Хә 


92-85 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (二 ) 


2) 对 字 标 进行 切 角 设计 ， 并 美化 字形 ， 如 图 2-86 所 示 。 


图 2-86 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (=) 


3) 添加 音乐 元 素 ， 考 虑 添加 在 哪个 字 上 最 合适 ， 且 如 何 目 然 而 不 突 几 ， 如 图 2-87 所 示 。 


图 2-87 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (四 ) 
4) 确定 图 形 后 将 它 置 入 文字 中 ， 并 微调 ， 如 图 2-88 所 示 。 


5) 对 字 标 结构 进行 调整 ， 突 出 “音乐 ”二 字 ， 错 落 结构 增加 层次 ， 如 图 2-89 所 示 。 


图 2-88 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (2) 


图 2-89 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (六 ) 


6) 友 现 字 标 整体 感 还 不 够 ， 于 是 加 一 个 边框 ， 使 其 看 上 去 更 加 像 整 体 ， 并 开始 修剪 之 前 日 色 的 切 角 遮盖 部 分 ， 如 图 2-90 所 


Хә 


图 2-90 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (七 ) 


7) 最 后 根据 网 站 页 面色 调 上 色 ， 添 加 委 饰 性 英文 ， 微 调 完 成 ， 如 图 2-91 所 示 。 


2-91 ”实战 案例 分 析 一 一 “音乐 亚洲 ” (A) 


6. 实 例 二 : “狙击 枪战 " 


“给 我 一 个 X”? 设计 是 不 可 能 凭空 给 出 一 个 X， 我 们 要 做 的 就 是 找到 一 个 事物 把 它 命名 成 X。 


1) 这 是 一 个 视频 厂 尾 的 LOGO 字 标 ， 先 在 草稿 上 手绘 设计 各 种 可 能 ， 并 删 选 各 种 不 适合 的 可 能 ， 如 图 2-92 所 示 。 


1Н ЇЗ 


尝试 各 种 不 同 笔画 特征 ， 导 圆 角 增加 角形 衬 线 ， 比 划 做 弧度 


{НЕБИЗ тж 


做 各 种 变化 ， 看 看 会 不 会 产生 一 些 新 的 想法 缩小 后 发 现 笔画 还 是 过 细 ， 不 能 体现 栏目 的 硬派 风格 


图 2-92 ”实战 案例 分 析 - 狙击 枪战 (一) 


字形 压 扁 、 比 划 加 粗 、 做 斜 角 封 顶 ， 
这 样 做 的 意义 是 希望 字 标 显 得 更 厚重 


添加 枪战 元 素 ， 整 体 结 构 上 做 错落 摆 放 


图 2-93 ”实战 案例 分 析 一 一 “狙击 枪战 ” (二 ) 


到 此 束 帮 不 多 了 ? 不 ， 还 没有 ! 我 们 会 友 现 虽然 添加 了 元 素 后 的 字体 仅 是 加 上 了 元 素 的 字 标 ， 并 没有 突出 枪战 的 么 迫 感 和 速 
上 度 感 ， 而 且 视 党 中 心 不 明 确 。 


3) 再 经 过 一 轮 科 选调 整 变 化 后 ， 得 出 图 2-94 所 示 效 果 。 


为 了 增加 速度 感 所 以 在 底部 做 了 向 上 的 斜 切 ， 


做 进一步 完善 ， 让 字 标 形成 整体 ， 于 是 从 左 至 右 做 
ЮЛГАН. 


之 前 通过 联想 枪战 的 子弹 元 素 ， 同 时 也 为 之 后 视频 
内 能 做 出 动画 特效 ， 所 以 决定 在 字 标 上 设计 子弹 划 
过 的 速度 感 。 于 是 接 下 来 在 字 标 上 做 速度 基线， 并 
由 左 全 右 破 开 字 标 ， 这 样 既 增加 了 设计 的 功 感 ， 叉 
贯穿 了 字 标 结构 ， 使 其 更 整体 . 


图 2-94 ”实战 案例 分 析 一 一 “狙击 枪战 ” (三 ) 


4) 最 后 为 了 给 字 标 更 好 的 示意 ， 通 剃 会 做 有 深 色 和 日 色 两 纹 底 来 展示 效果 ， 如 图 2-95 所 示 。 


82-95 ”实战 案例 分 析 一 一 “狙击 枪战 ” (四 ) 


最 终 视频 效果 如 图 2-96 所 示 。 


图 2-96 ”实战 案例 分 析 一 一 “狙击 枪战 (®) 


文字 的 出 现 是 文明 的 进步 ， 文 字 已 经 从 最 早 的 事件 记录 的 载体 ， 逐 渐 演 化 成 为 人 类 用 来 感知 世界 、 传 达 情 感 的 工具 。 人 们 不 
但 可 以 通过 文字 来 进行 视 况 上 的 形态 认 知 ， 还 能 够 通过 将 文字 图 形 化 、 和 意象 化 ， 以 更 店 创 意 的 形式 和 美学 效果 准确 表达 出 深层 的 
设计 思想 、 情 感 和 意图 ， 用 一 种 直接 的 方式 与 他 人 交 沅 对 事物 的 感悟 和 思维 等 。 


其 实 字 体 设计 还 有 很 多 种 可 能 ， 也 有 很 多 规律 可 循 ， 例 如 后 期 特效 的 不 同 展现 出 来 的 感觉 也 不 一 样 ， 也 许 还 会 上 一 个 层次 。 
在 设计 过 程 中 多 多 安 试 不 同 的 想法 ， 多 吸取 别人 的 经 验 ， 才 能 友 现 更 新 鲜 的 东西 。 


在 活动 页 的 设计 中 Banner 往 往 是 用 户 进 入 网 站 第 一 眼看 的 内 容 ， 也 是 整个 网 站 的 视觉 焦 点。 根据 活动 页 要 推广 的 内 容 将 
Banner 视 党 稿 改 为 不 同 尺寸 ， 从 而 用 在 各 种 不 同 的 推广 平台 。 这 里 的 几 个 Banner 从 构图 来 说 比较 常规 化 ， 玖 是 左 文字 右 配 图 ， 
这 样 的 构图 有 个 好 处 ， 融 是 阅读 起 来 很 方便 ， 比 较 适 用 于 快 消 类 活动 页 ， 能 让 用 户 在 很 得 的 时 间 内 知道 活动 的 大 概 内 容 。 


Banner 包 含 4 个 组 成 要 素 : 文案 或 商品 、 模 特 、 配 图 或 育 景 、 点 缀 物 (可 有 可 无 ) 。Banner 的 作用 是 宣传 、 展 示 、 准 确 传 
达 人 信息。 而 在 宣传 和 信息 准确 传达 中 ， 文 字 、 主 题 的 设计 是 必 不 可 少 的 ， 毕 竟 所 有 好 的 作品 ， 最 基本 的 要 素 束 是 细 市 的 丰富 和 完 
善 ， 细 节 处 理 得 好 ， 作 品 想 出 问题 都 很 难 。 那 么 接 下 来 融 先 从 文字 排版 的 规律 、 文 字 的 行距 和 间距 、 主 副标题 的 运用 等 一 些 细节 
开始 吧 ! 


我 们 阅读 文字 时 的 基本 规则 是 从 上 到 下 、 从 左 到 右 ， 文 案 的 排版 应 尽量 遵从 这 一 规则 。 除 特殊 版 式 之 外 ， 尽 可 能 减少 参 医 不 
齐 或 右 对 齐 排列 。 大 部 分 情况 下 ， 使 用 元 对 齐 或 居中 对 齐 是 最 为 合适 的 选择 ， 如 图 2-97 所 示 。 


图 2-97 文字 排版 示意 


2014.08.19~09.08 


92-98 ”Bannet 设 计 赏 析 一 一 文字 排版 〈 一 ) 


2-98 ~ 图 2-100 所 示 是 国外 的 Banner 设 计 ， 由 图 可 知 ， 不 管 是 应 用 了 文字 的 特效 、 文 字 的 前 后 层次 还 是 文字 的 倾斜 ,都 
хе т ЖЛЕ АЙ!» 


2-99 ”Banner 设 计 赏 析 一 一 文字 排版 (二 ) 


14919] {жаг} МЕ 


92-100 Ваппег НЕА (=) 


当然 ， 左 侧 对 齐 的 排版 方法 并 非 绝 对 。 来 欣 呐 几 张 国 外 右 对 齐 和 居中 对 齐 的 Banner 案 例 ， 如 图 2-101 ~ 82-10337. 
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92-101 ”Bannet 设 计 筑 析 一 一 文字 排版 (四 ) 


图 2-103 ”Bannet 设 计 和 赏析 一 一 文字 排版 〈 六 


当 素 材 在 顽 侧 或 者 居中 出 现 的 时 候 ， 我 们 可 以 使 用 石 对 齐 或 者 居中 对 齐 ， 效 果 融 会 比 左 对 齐 有 更 好 的 效果 。 采 用 何 种 对 齐 方 
式 ， 关 键 还 是 取决 于 上 自己 对 设计 目标 的 理解 度 。 


[т=р= 一 == 1ч 一 日 二 工 HH、 u 
2. 明 确 主 、 副 标题 和 搞 述 


主 、 副 标题 文字 的 版 式 核心 还 是 对 比 ， 诸 如 粗 与 细 、 大 和 小 之 类 的 。 而 与 谁 做 对 比 、 怎 么 对 比 、 为 什么 要 对 比 ， 对 于 这 几 个 
问题 很 多 初学 者 掌握 得 都 不 太 好 ， 往 往 容易 把 一 个 Banner 做 得 很 花哨 。 


主 标题 大 、 粗 、 醒 目 ， 副 标题 可 以 与 主 标题 用 同一 字体 ,但 应 略 大 、 略 粗 且 较 为 规整 。 摘 述 常 伴 有 形 搭 配 来 划 出 分 隅 ， 这 样 


利于 阅读 ， 较 细 、 较 小 。 另 外 在 字体 的 选择 上 ， 摘 述 尽 量 不 要 使 用 识别 上 度 较 低 的 、 异 形 的 字体 ， 那 样 并 不 方便 阅读 ， 还 有 可 能 会 
能 了 你 的 Banner。 图 2-104~ 图 2-106 所 示 ， 这 就 是 一 个 好 的 示例 。 


一 般 情况 下 ， 主 标题 还 是 以 一 行为 宜 ， 如 果 主 标题 过 长 会 导致 我 们 的 视 完 点 被 拉 长 。 


网 易 音 乐 出 品 的 Banner， 他 们 目 己 的 几 套 模板 也 是 遵循 乙 前 说 的 版 式 ， 即 左 对 齐 、 届 中 对 齐 和 右 对 齐 。 
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图 2-104 ”Bannet 设 计 赏 析 


明确 主 次 (一 ) 


图 2-105 ” ”Banner 设计 赏析 


明确 主 次 (二) 
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图 2-106 “Bannet 设 计 赏 析 明确 主 次 (三) 


З.А ПАЈЕ 
行距 与 同 距 也 是 点 睛 之 笔 。 如 果 控 制 得 好 ， 整 个 文案 都 会 很 和 谐 ， 如 果 控 制 不 好 ， 即 便 上 边 提 到 的 几 个 拉 巧 都 做 得 很 好 也 会 
让 人 感 况 整体 非 钊 不 舒服 。 
以 图 2-107 所 示 Banner 为 例 ， 主 标题 、 副 标题 用 了 明显 的 左 对 齐 构 图 。 在 LOGO、 主 标题 、 副 标题 和 按钮 中 寻找 到 了 版 式 的 
平衡 点 ， 使 得 文字 排版 更 有 证 奏 感 和 空间 感 。 用 红线 和 透明 黑色 块 标注 一 下 能 看 得 更 清晰 ， 如 图 2-108 所 示 。 
我 们 可 以 拉 开 文案 间距 的 行距 ， 较 为 合理 地 承担 行距 的 上 窜 下 宽 ， 宽 度 可 以 帮助 支持 画面 ， 但 是 要 注意 ， 这 个 时 候 我 们 要 把 
分 得 太 多 文案 融会 散乱 ， 视 线 也 不 


同一 范围 的 文案 看 作 一 个 整体 ， 当 作 一 个 分 块 ， 不 要 让 这 种 整体 在 一 个 画面 里 出 来 太 多 。 板 块 
易 集 中 ， 一 般 情 况 下 两 块 即 可 。 不 过 整体 中 的 文案 之 间 可 以 做 一 些小 浮动 性 的 行距 处 理 ， 如 图 2-109 和 图 2-110 所 示 。 
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图 2-107 ”Bannet 设 计 沉 析 一 一 行距 和 间距 (一) 


ШЫ 
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92-108 Bannet 设 计 货 析 一 一 行距 和 间距 ( —) 
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12-109 ”Bannet 设 计 赏 析 一 一 行距 和 间距 (=) 


图 2-110 ”文字 间隔 示意 


所 以 在 距离 的 把 控 中 ， 我 们 一 定 要 慎重 考虑 画面 平衡 是 人 否 合理 ， 直 日 点 说 残 是 能 售 把 上 方 的 文字 文 撑 起 来 ， 而 支撑 的 这 个 过 
程 瓯 是 得 看 文字 的 行距 和 间距 了 。 


4. 英 文 的 使 用 


不 少 朋 友 都 很 喜欢 用 英文 做 设计 ， 包 括 我 在 内 。 其 实在 活动 或 Banner 设 计 里 ， 英 文 更 多 是 起 到 准 饰 、 平 衡 男 面 的 作用 。 在 
翻译 英文 时 是 有 技巧 的 ， 不 要 直译 ， 要 尽量 找 与 主题 相近 的 词 去 翻译 。 这 种 情况 我 们 尽量 使 用 大 写字 母 而 不 要 使 用 小 写 ， 因 为 小 
字 有 高 有 低 ， 会 显得 很 不 规整 ， 很 容易 干扰 用 尸 视觉 。 而 大 写字 母 高 度 相同 束 会 减 小 这 种 视 完 上 的 冲突 ， 如 图 2-111 所 示 。 


CC 


图 2-111 英文 字体 运用 示意 


АБСОето гїп 


如 图 2-112 所 示 ， 这 幅 Banner 设 计 如 果 没 有 大 写 的 严 文 标题 和 按钮 设计 的 平衡 支撑 画面 ， 单 靠 纯 文字 ， 可 能 会 使 左 侧 空 洞 


很 多 。 


( XHIGI 7] ) 


图 2-112 ”Bannet 设 计 赏 析 一 一 英文 的 使 用 《一 ) 


当然 也 可 以 用 纯 文 字 排 版 ， 例 如 图 2-113 所 示 。 在 这 里 只 是 提 到 英文 是 一 种 点 缀 的 方法 ， 并 不 是 绝对 的 ， 况 且 设 计 并 没有 什 
么 绝对 的 万 法 。 


图 2-113 ” ”Banner 设计 赏析 一 一 英文 的 使 用 (二 ) 


其 实 表 现形 式 、 配 色 、 标 题 设 计 、 产 品 特性 、 表 现 手 法 等 都 可 以 在 保持 页 面 调 性 一 致 的 情况 下 进行 任意 组 合 ， 所 以 方法 非 党 


多 ， 天 键 是 如 何 应 用 。 
下 面 我 们 抛 开 专业 ， 再 来 谈 谈 设计 活动 页 过 程 中 通用 的 一 些 职业 技能 和 方法 技巧 。 
5. 职 业 技能 和 方法 拉 巧 
(1) 需求 开始 前 
活动 页 设计 过 程 都 大 同 小 异 ， 方 法 的 架构 也 都 差不多 ， 基 本 样式 为 “ 聊 一 聊 、 想 一 想 、 看 一 看 和 试 一 试 ”。 
“ 聊 ， 就 是 跟 需 求 方 聊 一 聊 当 前 话题 ， 需 求 是 什么 ， 听 一 听 该 需求 的 起 因 、 用 途 和 需要 市 来 的 结果 
. 想 ， 想 想 这 个 需求 怎么 去 做 ， 针 对 该 需求 进行 一 些 可 执行 的 理论 思考 ， 找 出 一 些 具体 的 方法 。 
看， 这 一 步 就 需要 经 验 和 大 量 的 阅读 了 ， 翻 阅 一 些 优 秀 的 作品 ， 从 优秀 的 案例 中 寻找 灵感 ， 深 化 对 之 前 方法 的 理解 。 
` 试 ， 接 下 来 就 是 尝试 去 做 这 个 需求 了 。 根 据 以 上 的 经 验 、 方 法 ， 结 合 工 作 中 的 经 验 和 网 页 需求 进行 视 党 尝试 。 
(2) 学 会 观察 


新 手 最 容易 犯 的 错误 是 直接 使 用 Photoshop 或 lllustrator， 要 清楚 ， 学 会 Photoshop 和 lllustrator 并 不 能 让 你 成 为 设计 师 ， 
就 像 你 买 了 一 套 高 质量 的 画笔 也 不 会 成 为 艺术 家 一 样 ， 你 应 该 从 真正 的 基础 开始 。 


ЕЛЫ, F|: 你 不 需要 挤 在 一 个 画室 里 ， 跟 一 群 艺术 家 一 起 画素 描 、 速 写 。 你 甚至 不 需要 男 得 非常 好 ， 只 要 掌握 一 所 


基础 束 行 。 你 做 一 件 事 即 可 学 会 如 何 画 画 ， 也 就 是 看 一 些 关 于 绘画 的 书 ， 然 后 每 天 花 半 个 小 时 去 练习 画 画 ， 坚 持 一 个 月 ， 会 有 惊 
人 的 效果 。 因 为 绘画 是 一 种 最 快 产 出 最 多 元 化 想法 的 方式 。 然 而 在 这 里 你 大 可 放 轻 松 ， 再 丑 的 手绘 也 能 达到 目的 。 这 也 是 为 什么 
你 即使 不 会 画 画 ， 我 仍然 建议 你 养 成 手绘 的 习惯 。 图 2-114 所 示 即 是 一 种 手绘 稿 。 


图 2-114 日 常 需求 的 手绘 稿 


其 次 ， 学 习 一 些 平面 设计 理论 ， 学 会 运用 颜色 及 排版 。 当 然 你 也 可 以 每 天 关注 一 些 优秀 的 设计 板块 。 


再 者 ， 学 习 如 何 写 作 ， 不 要 用 废话 来 充 版 面 。 身 为 一 个 设计 师 ， 你 的 工作 不 只 是 画 出 美丽 的 图 片 而 已 ， 你 还 必须 是 个 优秀 的 
沟通 者 。 想 想 你 过 去 的 一 切 经 验 ， 并 且 慎 选 每 一 个 字 。 


学 习 放 茎 目 己 的 作品 ， 这 也 是 很 困难 的 部 分 。 要 做 好 心理 准备 ， 因 为 你 目 己 党 得 已 经 是 满分 的 作品 随时 有 可 能 被 把 杀 。 越 快 
做 好 这 样 的 心理 准备 ， 工 作 残 能 越 快 上 手 ， 因 此 奋 总 得 成 品 不 够 好 时 ， 残 随时 砍 挥 重 练 吧 。 


找到 公正 的 另 一 双眼 : 向 懂 设 计 的 人 询问 看 完 你 作品 后 的 感觉 。 若 身边 没有 这 类 朋友 ， 就 去 参加 设计 师 聚 会 或 相关 活动 来 认 


识 几 个 ! 
也 要 问 间 不 懂 设 计 的 人 对 你 的 作品 有 什么 看 法 。 让 你 将 来 的 使 用 者 试用 你 做 的 网 页 或 应 用 软件 。 不 要 害怕 问 陌生 人 的 意见 。 


认真 聆听 别人 的 意见 ， 不 要 急于 辩解 。 当 你 问 别 人 意见 ， 而 对 方 愿 意 化 时 间 和 精力 回答 你 时 ， 切 记 不 要 用 辩解 来 回报 他 们 。 
相反 地 你 可 以 感谢 他 们 ， 并 且 问 他 们 问题 ， 最 后 你 再 目 行 考虑 是 否 采 纳 他 们 的 意见 。 


相信 专业 扩 能 和 职业 近 能 相 结 合 后， 再 加 上 你 的 用 心 和 努力 ， 终 能 创作 出 优秀 的 作品 。 


25 ”活动 运 襄 设计 风格 篇 一 一 设计 林 动 ， 风 格 先行 


设计 风格 是 用 尸 对 整个 网 页 的 第 一 印象 ,一 个 成 功 的 网 页 ， 它 的 整个 风格 是 非常 贴近 目标 用 尸 喜 好 的 ， 能 让 用 己 看 到 它 的 第 
一 时 间 是 愉悦 的 ， 产 生 情 感 的 共鸣 。 


迅雷 运营 活动 的 营销 策划 基本 上 都 是 以 开通 会 员 为 核心 而 展开 的 ， 在 实际 设计 上 没有 多 样 化 的 实物 产品 或 素材 可 以 使 用 ， 最 
多 束 是 会 员 卡 了 。 但 不 可 能 每 个 页 面 上 都 是 各 种 会 员 卡 的 展现 ， 这 样 会 出 现 高 度 重 复 和 视 党 疲 芳 ， 所 以 设计 师 要 通过 多 种 途径 设 
计 出 不 一 样 的 创 最 运 豆 页 面 来 ，“ 人 参半 风格 ”的 设计 便 成 为 一 个 最 佳 解决 方案 。 


接 下 来 我 们 简单 介绍 什么 是 参半 风格 及 其 运营 案例 。 当 然 并 不 是 所 有 的 页 面 都 是 这 种 风格 ， 要 根据 有 具体 的 产品 特性 做 出 变 
(0, Шаа. И. 255 ( 见 图 2-115) 等 多 种 风格 。 相 信和 局 平等 风格 大 家 都 有 所 和 耳闻， 什么 是 参半 设计 风格 ? 参半 残 是 在 
扁平 风格 的 基础 上 加 上 高 光 、 渐 变 体现 出 物质 的 形体 、 质 感 和 重量 。 虽 然 扁平 风格 随处 可 见 ， 但 因为 它 没有 质感 相伴 ， 所 以 对 简 
单 的 形状 就 会 有 更 高 的 要 求 ， 比 较 适 合 产品 界面 或 官网 等 正式 的 场合 。 扁 平 不 易 曹 造 出 刺激 性 强 的 运营 氛围 ， 而 且 情 感 的 传递 也 
会 显得 冷清 ， 所 以 以 下 案例 均 是 介 于 局 平和 拟 物 之 间 的 参半 风格 ， 这 种 风格 在 电 丙 页面 中 较 多 见 ， 可 以 膏 造 出 绚丽 、 精 彩 的 视 沈 
效果 。 图 2-114 所 示 为 最 强 福 利 日 的 Banner 设 计 ， 从 白金 会 员 的 LOGO、 超 级 会 员 的 LOGO、 礼 物 icon 设 计 a 到 荧光 盒子 ,每 一 个 
都 突出 大 礼包 的 概念 。 再 利用 透视 感 创 造 出 一 种 高 级 和 大 气 的 氛围 ， 给 人 一 种 信任 和 贵重 的 感 党 。 


还 剩 归 30 个 柱 利 


图 2-115 ”参半 风格 一 一 最 强 福利 日 运营 页 面 Bannet 效 果 
2.5.1 АБИ ЛИПА, ЙЕЛ ЕЛЕУ АЙ 
设计 师 要 紧 跟 时 代 的 潮流 和 热点 ， 掌 握 和 接收 多 变 的 信息 与 潮流 设计 元 素 ， 将 它们 运用 到 自己 的 设计 作品 中 ， 形 成 独特 的 风 


权 相 天 的 风险 并 要 设计 出 属于 目 己 的 特色 和 创意 ， 重 点 还 是 内 容 设计 要 足够 吸引 用 户 眼 球 。 热 点 实效 性 虽 和 起 ， 但 能 完全 满足 一 个 


运 豆 活动 页 面 的 使 个 ， 只 要 利用 好 这 段 时 间 融 会 取得 意 想 不 到 的 结果 。 下 面 是 两 个 迅雷 会 员 开 放 日 的 活动 页 遇 上 热点 的 和 案例， 前 
述 了 设计 思路 和 转化 结果 。 


1. 抓 精灵 年 费 免 单 


(Рокетоп Go) 应 该 是 2016 年 最 火 的 手 游 了 ， 是 对 现实 世界 中 出 现 的 小 精灵 进行 探索 、 捕 捉 并 与 乙 战 斗 或 与 他 人 交换 的 
游戏 。2016 年 8 月 开放 的 亚洲 地 区 只 有 日 本 和 中 国 的 香港 和 人 台湾， 对 中 国 大 陆 用 户 还 没有 开放 ， 所 以 大 家 玩 的 都 是 模拟 场景 。 我 
们 在 同月 策划 了 一 个 抓 精灵 年 费 免 单 的 运营 活动 ， 《Pokemon Go》 的 关键 词 是 小 精灵 、 地 图 、 捕 捉 ， 所 以 在 页 面 设计 的 时 候 
也 是 围绕 这 三 点 。 利 用 这 种 热点 最 忌讳 的 是 版 权 和 抄 效 ， 所 以 在 设计 小 精灵 的 时 候 把 大 家 弟 见 的 几 个 动物 ， 比 如 诺 卡 丘 、 妙 蛙 种 
子 、 小 火龙 等 形象 改 为 我 们 的 亩 乌 形 象 ， 融 像 雷 乌 罕 上 了 小 精灵 的 衣服 一 样 。 


其 次 是 页 面 风格 的 把 控 ， 设 计 师 虽然 玩 过 《Pokemon Go》， 但 在 此 之 前 没有 接触 过 天 于 它 的 其 他 内 容 ， 所 以 特意 去 了 解 
了 这 个 游戏 的 历史 以 及 看 了 相关 的 动画 片 ， 友 现 小 精灵 的 动画 片 是 给 小 朋友 看 的 ， 所 以 内 容 低 龄 、 幼 稚 ， 但 手 游 是 给 年 轻 人 玩 
的 ， 游 戏 界面 的 风格 是 参半 。 参 半 在 局 平 的 基础 上 加 了 高 光 和 阴影 等 质感 ， 形 成 比较 饱满 圆润 的 、 较 轻 的 质感 及 富有 情感 的 立体 
图 形 。 这 种 风格 界面 既 局 站 大 气 又 保留 了 一 颗 音 心 ， 页 面 的 风格 大 致 也 融 这 样 定 下 来 了 。 


接 下 来 又 面临 另 一 个 问题 ， 那 融 是 权 跟 热点 的 同时 要 有 目 己 的 创意 和 特色 。 之 前 火 了 很 久 的 《纪念 碑 合 》 风 格 ， 很 多 运 言 页 
面 在 使 用 它 的 风格 时 表现 出 极 强 的 一 致 感 ， 接 触 过 这 个 游戏 的 用 尸 会 被 游戏 本 身 的 特性 所 感染 ， 但 是 页 面 所 要 传递 的 运营 内 容 反 
会 被 前 弱 ， 这 样 就 会 出 现 盲 目 跟 随 热点 而 失去 自我 的 情况 。 所 以 在 设计 抓 精灵 的 页 面 时 应 尽量 降低 与 热点 的 相似 度 ， 从 其 背 
景 、 元 素 、 字 体 设计 等 方面 做 出 新 的 创意 。 比 如 背景 地 图 画 得 比较 简单 ， 更 多 地 创造 出 一 种 透视 感 ， 把 抓 精 灵 和 闫 精灵 用 两 个 容 
器 各 目 包 应 起 来 ， 边 框 的 设计 没有 用 大 圆 角 的 形式 而 是 采用 比较 硬 明 的 折 角 ， 但 又 不 会 像 矩形 那么 万 正 ， 这 样 设计 的 目的 是 让 整 
个 画面 市 有 一 些 科 技 感 并 降低 卡通 的 感 完 。 风 格 是 一 种 艺术 美感 的 一 致 性 体现 。 多 种 风格 存在 于 同一 个 页 面 里 时 ， 要 达到 | 协调 和 
舒适 。 


整个 页 面 由 两 种 图 形 组 成 : 圆 和 和 窍 形 。 这 两 种 图 形 有 各 目的 分 工 ， 圆 形 出 现在 重点 内 容 上 ， 比 如 主 标题 年 费 免 单 的 字体 设计 
以 及 标题 上 方 的 大 半圆 (大 半圆 逐渐 全 日 是 与 凑 够 5 只 小 精灵 相关 的 一 种 指向 性 设计 ) 、25 个 小 精灵 〈 见 图 2-116) 以 及 
Button; 和 矩形 出 现在 背景 、 点 缀 元 素 、 区 块 等 辅助 元 素 上 ， 如 图 2-117 所 示 。 如 果 全 部 都 是 圆 形 ， 会 降低 画面 的 品质 ， 从 而 显得 


低龄 。 
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92-117 抓 精 灵 年 费 免 单 运 营 活动 页 面 


苹果 公司 一 年 一 度 的 新 品 发 布 会 全 世界 瞩目 ，2016 年 的 iPhone 7 发 布 会 也 是 如 此 。 很 多 运营 页 面 里 最 好 的 奖品 便 是 
iPhone, 说 明 大 多 数 人 很 愿意 为 此 买单 。 迅 雷 的 运营 活动 在 iPhone 7 发 布 会 前 一 周 就 已 经 开始 策划 并 可 以 上 线 预购 ， 由 于 页 面 
转化 率 很 好 ， 在 iPhone 7 发 布 后 紧 接 着 重新 设计 了 一 稿 正式 负面 ， 同 时 对 之 前 页 面 存在 的 问题 进行 了 优化 和 奖品 升级 。 


此 次 运 襄 页 面 的 主要 卖点 是 iPhone 7 ( 见 图 2-118) ， 其 产品 特性 很 明显 ,科技 、 现 代 、 时 尚 。 局 平 风格 比较 适合 来 加 强 传 
， 其 中 不 需要 参半 或 拟 物 风格 的 人 情 味 ， 需 要 酷 与 动感 ， 其 次 需要 确定 的 是 搭配 页 面 风格 的 配色 。 


IPhone и 


图 2-118 iPhone 7 


页 面 里 的 每 个 颜色 都 有 属于 上 自己 的 特定 功能 ， 尽 量 不 要 混用 ， 视 部 和 信息 可 以 通过 颜色 来 做 区 分 ， 让 整个 交互 和 逻辑 更 清 
晰 ， 更 方便 浏览 。 这 次 页 面 设计 的 主要 切入 点 便 是 iPhone 7 的 钢琴 黑 和 哑 光 黑 ， 在 苹果 的 官网 中 束 可 以 找到 风格 配色 : 黑色 和 
深 赣 色 。 它 的 整个 界面 都 是 黑色 ， 手 机 上 新 出 的 动态 壁纸 是 蓝 色 的 琉璃 球 ， 如 图 2-117 所 示 。 所 以 页 面 的 背景 颜色 束 可 以 利用 黑 
和 赣 来 配合 完成 ， 重 要 内 容 信 息 用 了 红色 来 突出 ， 如 点 亮 、 红 包 和 话费 卡 ; Button 和 可 点 击 的 文字 链接 的 颜色 统一 用 黄色 做 区 
分 。 如 图 2-119 所 示 ， 当 一 个 页 面 已 经 有 三 个 对 比 强烈 的 颜色 时 ， 要 善于 利用 颜色 明暗 度 和 相近 色 做 主 次 区 分 、 突 出 和 弱化 。 


经 过 不 断 优化 和 运 代 ， 文 付 的 转化 率 提 升 1 倍 一 一 国庆 前 改版 页 面 ( 见 图 2-120) ， 在 UV 没有 大 涨 的 情况 下 ， 日 均 流 水 上 涨 
97%， 支 付 转化 率 提升 1 倍 。 
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图 2-119 iPhone 7Plus 免 费 送 版 后 运营 活动 页 面 
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图 2-120 ”支付 转化 率 最 高 峰值 出 现在 页 面 改版 后 


252 ”用 三 日 ， 襄 造 网 页 氛围 
节日 本 身 融 是 一 种 氛围 ， 把 实际 生活 中 的 节日 放 到 活动 页 面 中 来 ， 所 有 的 元 素 和 颜色 都 属于 同一 个 来 源 或 者 都 会 癌 同 一 个 方 
向 进 友 ， 残 会 产生 强大 的 凝聚 力 和 震撼 人 心 的 力量 ， 让 用 户 沉浸 在 其 中 并 裤 这 种 氛围 所 市 动 ， 产 生 我 们 想 要 激 友 出 来 的 心情 。 


下 面 两 个 案例 是 迅雷 会 员 7 周 年 活动 和 “女神 遇见 春季” 活动， 不 同 的 节日 ， 运 用 不 同 的 设计 元 素 ， 宫 造 各 目 独 特 的 风格 。 
1. 迅 雷 会 员 7 周 年 


会 员 7 周 年 活动 是 属于 会 员 用 户 的 节日 悟 典 ， 风 格 当 然 要 美 槐 、 绚 丽 ， 让 人 过 目 不 筷 ， 而 且 要 实 实在 在 地 、 更 大 力度 地 
БИР. 


(1) 会 员 7 周 年 庆典 品牌 标识 设计 


会 员 7 周 年 庆典 品牌 标识 设计 如 图 2-120 所 示 ， 活 动 页 面 分 为 三 期 ， 并 将 “7” 作 为 主体 元 素 进行 突出 设计 ， 所 以 在 品牌 标识 
设计 的 时 候 也 把 “7” 提 出 来 ， 如 图 2-121 所 示 。 


图 2-121 迅雷 会 员 7 周 年 LOGO 标 识 


(2) 迅雷 会 员 7 周 年 的 运营 活动 页 面 设计 


这 是 迅雷 会 员 7 周 年 第 三 期 的 页 面 。 第 三 期 刚好 和 每 月 的 会 员 开 放 日 一 起 进行 ， 开 放 日 的 主题 主要 是 拉 新 和 回馈 老 用 户 ， 通 
过 打折 或 更 优惠 的 万 式 吸引 用 尸 购买 迅雷 会 员 ， 而 7 周年 是 具有 纪念 意义 的 日 子 ， 所 以 两 者 结合 会 更 盛大 且 隆 重 。 这 次 主要 围 
绕 “7” 和 年 费 会 员 进 行 ， 为 了 让 活动 更 有 趣味 性 ， 使 用 了 比较 新 颖 的 抽奖 形式 ， 为 了 答谢 会 员 ， 订 单 尾 号 中 只 要 有 两 
个 “7” 便 可 获得 定制 版 文化 衫 和 超级 公仔 。 


: 风格 : 参半 (扁平 风格 的 基础 上 加 上 高 光 、 渐 变 体现 形体 、 质 感 和 重量 ) 。 
ЖМ: 和 气球、 球体、 金币、 红包 、7 年 会 员 卡 、 丝 带 、 英 光 条 。 
` 构图 与 节奏 : 圆润 。 


. 色彩 与 光线 : 光源 从 主题 字 周 围 均匀 散 开 ; 紫色 为 主 色 调 ， 主要 用 在 背景 气氛 图 和 点 级 元 素 上 ; 黄色 虽 为 辅 色 ， 用 在 重要 
的 Button 和 醒目 的 标题 上 ; 背景 较 暗 ， 内 容 板 块 较 涡 ， 前 后 对 比 度 较 强 ， 突 出 重要 内 容 。 


` 对 比 : 突出 7.7 折 ， 弱 化 开 年 费 疯狂 “和 鲈 患 ”; 球体 和 其 他 点 组 元素 从 高 光 中 心 由 小 到 大 、 由 明 到 上 暗 、 由 密 到 芯 散 开 ; 较 
小 的 和 远 处 的 看 起 来 较 轻 ， 越 近 的 和 大 的 较 重 ; 将 开通 年 费 和 奖品 放 在 第 一 屏幕 展现 。 


字体 设计 重点 突出 7.7 折 ， 捕 提 了 当时 比较 流行 的 灾 光 字 的 设计 ， 主 次 分 明 ， 让 整个 画面 干净 利沙。 
(3) 创意 抽奖 机 


弟 见 的 抽奖 形式 大 多 都 是 市 有 赌博 性 质 的 游戏 ， 它 的 魅力 束 在 于 以 小 搏 大 ， 低 风险 、 蜗 回报 。 原 型 图 中 的 抽奖 把 手 在 右 侧 ， 
会 造成 左右 不 平衡 和 信息 不 对 称 的 情况 ， 所 以 设计 的 时 候 把 大 家 熟悉 的 样式 进行 重新 改造 ， 陌 生化 ， 让 它 变 得 更 为 稳重 且 有 新 
意 。 为 了 增强 页 面 效 果 ， 在 抽奖 模块 的 下 方 设 计 了 一 个 有 趣 的 动画 ， 从 里 面 不 停 地 下 奖品 雨 ， 让 用 户 帝 得 里 面 会 有 很 多 实 实在 在 
的 东西 ， 激 友 用 户 点 击 抽奖 的 欲 尾 。 但 是 鼠标 放 在 Button 上 时 ， 动 画 会 停止 ， 以 免 影 响 用 户 操作 ， 造 成 注意 力 转移 。 通 过 上 述 
设 可 使 用 户 更 精准 、 更 放心 、 更 愉快 地 参加 活动 。 这 种 形式 在 后 面 的 运 宫 活 动 中 被 多 次 作为 激励 用 户 操 作 的 范例 。 


(4) 品牌 周边 一 一 文化 衫 图 案 绘 制 


7 周年 文化 衫 和 超级 公仔 是 一 整套 打包 送 给 用 户 的 ， 所 以 在 图 案 绘 制 时 融入 了 大 量 的 迅雷 产品 LOGO ( 见 图 2-122) 和 超级 
公仔 的 轮廓 。 


图 2-122 ”用 于 绘制 文化 衫 的 部 分 迅雷 产品 LOGO 


“Hello, XUNLEI VIP” 作 为 主体 文字 ， 在 绘画 的 时 候 让 主题 字 完美 地 与 画面 融 为 一 体 。 画 面 中 间 部 分 的 图 形 是 以 迅雷 公仔 
的 轮廓 作为 基础 创作 的 ， 因 为 会 员 是 从 2009 年 开始 的 ， 所 以 画面 中 间 加 了 “SINCE2009” 突显 7 周年 的 时 间 。 其 他 插画 元 素 基本 
都 是 以 迅雷 的 各 个 产品 为 原型 ， 然 后 加 以 抽象 和 小 怪物 化 处 理 ， 让 它们 看 起 来 没 那么 直接 ， 并 且 有 更 多 的 想象 空间 ， 如 图 2-123 
和 图 2-124 所 示 。 


7 周年 的 运营 活动 页 面 如 图 2-125 所 示 。 


图 2-123 ”超级 公仔 融合 在 文化 衫 中 的 图 案 


图 2-124 限量 版 超级 公仔 和 7 周年 文化 衫 效果 图 
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图 2-125 ”迅雷 会 员 7 周 年 (第 3 期 ) 运营 活动 页 面 


(5) 数据 反馈 


活动 时 间 14 天 ， 第 三 期 活动 的 日 均 开通 人 数 不 断 提升 ， 本 期 活动 根据 第 一 期 和 第 二 期 的 经 验 ， 在 渠道 投放 及 活动 流程 上 不 


断 优 化 (加 强 倒计时 、 渠 道 精准 投放 、 创 新 活动 玩法 ) 。 与 第 二 期 活动 相 比 ， 日 均 开 通 人 数 环比 提升 3.4 倍 ， 与 第 一 期 活动 相 
比 ， 环 比 提升 81%， 如 图 2-126 所 示 。 


日 均 支 付 人 数 较 第 二 期 提升 了 3.4 倍 
较 第 一 期 活动 提升 了 81% 


第 一 期 第 三 期 


图 2-126 ”三 期 活动 运营 数据 分 析 对 比 


2. “女神 遇见 春节 ” 


春季 给 女 促 友人 福利 是 春季 一 次 较 大 型 的 运营 策划 活动 ， 前 后 分 为 三 期 : 第 一 期 活动 预告 ， 告 诉 用 户 红 包 友 放 的 具体 流程 和 步 
又 、 以 及 后 续 所 有 活动 ; 第 二 期 红包 正 陈 友 放 ， 女 神 和 商家 从 除夕 开始 友 红 包 ， 共 7 天 ; 第 三 期 延续 二 期 活动 的 尾 攻 ， 主 要 以 抽 
奖 力主， 其 中 有 “女神 陪 你 过 证 ”等 丰富 奖品 。 这 三 期 运营 活动 视觉 包 六 上 均 表 现 出 延续 性 和 一 致 性 ， 这 里 以 第 二 期 运营 页 面 的 
视 嘻 设计 来 说 明 真 人 素材 拍摄 与 参半 风格 的 结合 ， 从 而 营造 出 一 种 美丽 时 尚 的 春节 和 氛围。 


(1) 风格 定位 


人 们 对 传统 节日 的 记忆 更 多 的 是 情感 记忆 ， 情 感 需 要 时 间 和 气氛 来 唤起 ， 可 以 很 平常 ， 也 可 以 很 强烈 。 商 家 和 媒体 比较 擅长 
对 厂 日 的 泻 染 ， 激 友人 们 内 心 深 处 对 证 日 的 渴望 ， 很 多 人 对 于 平时 洛 不 得 买 的 东西 ， 仙 到 市 日 促销 丈 会 愿意 消费 。 每 个 书 日 都 有 
目 己 独特 的 事物 用 于 营造 这 种 气氛 '， 比 如 春节 肯定 会 有 大 红 灯 秀 、 对 联 、 牙 炮 、 红 包 、 糖 果 、 气 球 等 元 素 ， 红 色 与 金色 属于 春节 
的 标 配 色 ， 而 举国 欢 庆 的 春节 遇 上 女神 上 友 红 包 又 会 碰撞 出 什么 呢 ? 

可 能 有 读者 会 问 迅雷 女神 是 何许 人 也 ? 这 可 能 要 追溯 到 2015 年 我 们 的 《直播 吧 女 神 》 的 项 目 ， 这 是 一 档 基于 真实 、 健 康生 
活 的 大 型 真人 秀 节 目 。 我 们 通过 网 络 直 播 女 神 锋 炼 马甲 线 的 真实 生活 ， 涉 及 每 天 的 健身 、 饮 食 、 兑 拉 游 戏 等 很 多 场景 ， 以 科学 健 
身 为 起 点 ， 倡 导 健康 生活 ， 引 | 领 新 型 时 尚 。 女 神 传 达 的 是 一 种 健康 向 上 和 青春 活力 的 形象 ,非常 受 人 欢迎 ， 这 非常 适合 作为 我 们 
这 次 运营 活动 的 人 物 素 材 ， 特 别 是 春 证 活动 一 一 女神 送 红 包 ， 迅 雷 所 有 用 己 都 会 喜气 洋洋 ， 被 女神 和 红包 所 吸引 。 


所 以 设计 风格 的 天 键 词 是 喜庆 、 时 尚 、 女 神 、 活 力 ， 所 有 的 页 面 元 素 也 是 基于 此 来 进行 的 。 


(2) 人 物 素 材 担 摄 


在 开始 设计 前 ， 我 们 根据 交互 稿 设 定 了 一 些 人 物 动 作 、 动 画 和 视频 ， 大 概 每 个 人 有 8 个 动作 ， 以 及 1 个 gif 和 1 个 四 人 同 框 的 视 
频 。 但 是 ， 由 于 后 期 设计 的 时 候 又 改 了 方案 ， 所 以 只 用 到 了 其 中 一 部 分 。 前 期 准备 总 会 和 后 期 设计 有 些 出 入 ， 所 以 在 拍摄 索 材 时 
尽量 多 担 一 些 可 能 会 用 到 的 动作 ， 以 备 不 时 之 需 。 


(3) я 818 


前 面 提 到 设计 风格 的 定位 是 : 喜庆 、 时 尚 、 女 神 、 活 力 ， 用 真人 和 参半 风格 混搭 ， 在 颜色 的 选择 和 元 素 的 刻画 上 均 偏 向 于 年 
轻 和 时 尚 的 春 书 气氛， 元 素 中 还 加 入 了 棒 棒 糖 和 气球 ， 用 一 丝 丝 甜 蜜 来 突显 领取 女神 红包 的 斑 福 感 。 其 次 包括 书法 字体 设计 ， 减 
少 书法 特有 的 区 老 和 潇 酒 ， 勾 勒 出 比较 有 力量 和 年 轻 的 笔触 。 图 2-127 所 示 是 最 初 的 方案 。 
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82-1277 ”最初 方案 ， 选 择 其 中 一 位 女神 领取 红包 


由 于 后 期 对 方案 重新 做 了 调整 ， 每 个 女神 和 商家 轮流 友 红 包 ， 交错 时 段 友 放 ， 所 以 页 面 中 的 女神 均 是 1 人 ， 所 以 
页 面 的 设计 也 重新 做 了 优化 ， 如 图 2-128 所 示 。 
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92-128 ”女神 发 放 红 包 时 上 段 一 一 PC 端 页 面 


商家 友 放 红包 雨 的 PC 端的 页 面 如 图 2-129 所 示 。 
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92-129 ”商家 发 放 红 包 雨 时段 一 一 PC 端 页 面 


(4) 移动 端 变化 


当然 都 会 有 对 应 的 移动 端 设计 ，PC 端 和 移动 端 是 同步 进行 的 ， 将 PC 端 转 换 到 移动 端 时 要 根据 屏幕 大 小 和 加 载 速度 减 去 很 多 


背景 元 素 ， 尽 量 让 页 面 简单 化 ， 但 这 样 并 不 会 减弱 氛围 感 的 营造 ,确切 地 说 ， 在 空 屏幕 比较 小 的 移动 端 创 造 节 日 气氛 反而 会 更 容 
易 些 。 同 样 的 功能 在 不 同 终端 需要 因地制宜 地 设计 ， 图 2-130 所 示 中 第 一 排 是 女 仲 红包 预告 页 面 ， 第 二 排 是 女神 正式 友 放 效果 。 
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图 2-130 ”女神 发 放 红 包 时 段 预告 一 一 正式 发 放 移 动 端 页 面 


商家 红包 都 使 用 同一 页 面 ， 只 需要 替换 商家 LOGO， 并 米 用 移动 端 红 包 十 的 普遍 形式 发 放 ， 用 尸 点 击 屏 幕 来 抢 红 包 ， 这 种 形 
式 万 便 替 换 和 维护 ， 而 且 比 较 高 效 ， 如 图 2-131 所 示 。 


任何 运营 页 面 的 风格 都 有 它 的 原因 和 根据 ， 第 一 步 就 是 要 主动 去 了 解 和 挖 据 ， 这 样 才能 更 好 地 创造 和 友 展 。 一 个 运营 活动 页 
面 由 字体 设计 、 产 品 与 内 容 、 背 景 组 成 。 细 证 处 理 的 手法 可 以 从 以 下 维度 来 设计 和 评价 ， 如 图 2-132 所 示 。 


ОХ: 拟 物 、 席 平 、 和 参半、 高端、 潮流 …… 
. 素材 : 配套 、 精 修 、 延 续 …… 


构图 与 节奏 : Б. Р. 


Í. q Ж, Жел |» Эй, 2, 轻重 、 明暗 
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图 2-131 商家 发 放 红 包 时 段 移动 端 页 面 


吉林 з= 5 ХЕ 


92-132 ”页面 视觉 评价 维度 


这 些 只 是 一 些 为 页 面 添 彩 或 者 不 让 页 面 出 错 的 方法 。 但 是 设计 师 结合 产品 特性 对 潮流 和 时 尚 的 捕捉 和 把 控 ， 生 动 有 效 地 做 出 
具有 创新 和 沉浸 感 的 设计 才 是 最 重要 的 ， 也 是 比较 困难 的 。 当 然 在 追求 创意 和 沉浸 感 的 同时 ， 也 要 兼顾 细节 ， 细 市 决定 一 个 页 面 
的 气质 和 态度 。 如 果 把 一 个 页 面 比 作 一 个 有 情感 、 有 思想 、 有 行为 的 人 ， 有 自己 独特 和 精致 的 外 人 在， 也 有 丰富 的 内 沽 和 故事 ， 从 
而 形成 一 种 能 够 吸引 眼球 的 磁场 。 


看 似 上 自然 、 打 动人 心 的 设计 ， 灵 感 来 源 其 实 常 在 设计 之 外 。 比 如 经 常 看 设计 类 的 杂志 和 网 站 ， 别 人 的 作品 可 以 启发 一 些 思 
路 。 设 计 灵 感 爆 友 的 前 提 是 大 量 知识 的 积 紧 ， 完 成 设计 需要 热情 和 谢 力 ， 更 多 需要 对 自己 作品 的 期 竺 和 热爱 。 对 设计 师 来 说 ， 知 
识 面 很 重要 。 对 一 切 事 情 保持 好 奇 ， 不 能 盲目 进行 。 只 有 将 这 些 最 基本 的 设计 工作 做 好 ， 才 能 产生 好 的 品质 ， 在 此 基础 上 产生 源 
源 不 断 的 商业 价值 。 


2.6 SUPER VIP- 一 一 ) А6554: 员 LOGO 品 牌 运营 设计 


品牌 是 一 种 个 性 化 的 创造 ， 要 区 别 于 各 种 类 型 的 产品 ， 且 易于 识别 和 记忆 。 为 了 让 品牌 和 它 特 定 的 市 场 联系 起 来 ， 残 需要 具 
体 化 并 且 引 人 注目 ， 把 品牌 特质 转化 成 可 视 的 形象 ， 出 色 的 设计 师 既 能 捕捉 到 品牌 个 性 ， 又 能 把 品牌 的 接触 点 转化 成 用 户 体 验 ， 
还 能 成 功 地 平衡 好 它们 的 专业 性 和 趣味 性 。 接 下 来 我 们 一 起 深度 训 析 迅雷 超级 会 员 的 品牌 运营 设计 。 


2.61 迅雷 超级 会 员 品 牌 设 计 定 位 


迅雷 会 员 体系 包括 普通 会 员 、 日 金 会 员 、 铅 石 会 员 。 迅 雷 的 基础 以 构 采 用 云 下 载 扩 术 ， 为 广大 用 户 提供 全 方位 加 速 的 增值 服 
务 ，VIP 会 员 可 享受 更 多 功能 和 特权 ， 主 要 有 离线 下 载 、 局 速 通道 、 安 全 特权 等 32 个 特权 ! 


超级 会 员 取代 钻石 会 员 ， 打 造 出 迅雷 会 员 更 尊贵 、 更 东兴 的 高 尊 品 质 。 集 合 日 金 会 员 、 快 鸟 会 员 和 网 游 加 速 会 员 三 大 会 员 身 


份 。 从 而 形成 新 的 会 员 体系 : 普通 会 员 、 日 金 会 员 、 超 级 会 员 。 


怎样 定义 好 迅雷 超级 会 员 的 品牌 特性 ? 确立 好 超级 会 员 的 天 键 词 是 第 一 步 : 尊贵 、 东 次、 品质 、 高 端 。 接 着 我 们 束 开 始 一 步 
步 将 这 种 品牌 特质 和 产品 属性 结合 起 来 并 具象 化 。 首 先 设计 其 LOGO 图 形 。 


1. 迅 雷 超级 会 员 LOGO 图 形 


迅雷 超级 会 员 是 在 迅雷 会 员 基 础 上 的 全 新 升级 ， 是 为 满足 用 户 对 个 性 和 品质 的 更 高 追求 而 推出 的 一 项 服务 ， 是 迅雷 会 员 的 
SUPER VIP。 对 于 “S” 符 号 ， 人 们 最 询 知 的 便 是 超人 (Super Мап) 了 ， 所 以 通过 “3 ”很 容易 联想 到 超级 、?uper。 提 取 其 
文 首 字 母 进 行 再 设计 ， 化 每 为 简 ， 并 将 此 会 员 的 “强大 功能 ”通过 力量 的 形式 融入 超级 会 员 的 标识 中 。 相 较 于 圆 形 和 巨型 ， 最 
富有 力量 的 图 形 是 三 角形 ， 所 以 整体 由 6 个 等 边 三 角形 组 成 ， 用 更 简单 、 更 有 活力 和 更 局 品质 的 样式 让 它 变 得 好 看 。 


字体 标识 是 设计 的 语言 ， 在 这 个 符号 的 背后 ， 意 味 着 超级 会 员 的 尊贵 ， 包 括 对 品质 的 追求 和 它 的 独一无二 。 字 体 LOGO 
在 “S” 的 设 定 中 ， 不 去 追求 那些 奇异 的 事物 ， 而 是 从 人 们 共有 的 认 知 中 提取 价值 ， 用 最 上 自然、 最 合适 的 方法 来 传达 “S” 这 种 
概念 。 字 体 设计 时 也 展示 了 “S” 的 印记 ， 从 而 形成 两 者 的 书 奏 一 致 的 品牌 标识 。 设 计 师 领悟 生活 的 所 见 所 疗 ， 通 过 每 一 个 方案 
的 取舍 、 每 一 个 细节 的 处 理 把 它 市 入 设计 。 


超级 会 员 LOGO 图 标 和 字体 设计 最 终 效果 如 图 2-133 所 示 。 
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图 2-133 ”超级 会 员 LOGO 图 形 和 字体 设计 


2. 超 级 会 员 品牌 色 : 黑 与 金 


黑色 神秘 、 庄 重 、 高 雅 、 上 暗藏 力量 ,金色 象征 高 贵 、 光 用 、 辉 焊 ， 故 而 超级 会 
示 。 这 企 迅 雷 会 员 体系 里 并 没有 出 现 过 ， 


会 员 使 用 黑色 和 金色 作为 主 色 调 ， 如 图 2-134 所 
是 一 种 新 锋 别 致 的 品牌 调 性 
相 融 合 ， 超 级 会 员 的 尊 


容易 显 


。 而 且 色 彩 的 对 比 市 出 的 力量 感 
现 出 来 ， 如 图 2-135 和 图 2-136 所 示 


忌 和 高 雅 相伴 ， 形 与 色 彼 此 


+ їй, 
п = 
Ш 


FFFFF 


图 2-134 超级 会 员 标 志 品 牌 色 
3. 迅 雷 三 大 会 员 LOGO 重 绘 和 优化 


由 于 一 些 历史 遗留 问题 ， 迅 雷 会 员 的 品牌 感 比较 竟 瑟 ， 代 此 超级 会 员 友 布 的 机 会 重 绘 3 大 会 员 LOGO， 重 新 优化 了 迅雷 会 员 


会 员 


的 视觉 体系 ， 如 图 2-137 所 示 。 品 牌 色 、 图 形 、 质 感 都 重新 调配 ， 更 统一 的 同时 增加 了 辨识 度 和 茶 浴 感 ， 如 图 2-138 ~ 82-140 
所 示 。 


92-135 超级 会 员 标 准 标志 
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图 2-138 超级 会 员 标 准 图 标 
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重 绘 和 优化 


白金 会 员 标准 图 标 


图 2-139 


图 2-140 普通 会 员 标 准 图 标 一 一 重 绘 和 优化 


品牌 也 是 一 种 文化 ， 不 但 要 具备 精神 内 涵 ， 还 要 从 营销 策划 、 促 销 活动 、 广 告 宣传 、 客 己 关 系 等 各 个 方面 进行 整合 ， 让 用 户 
能 够 体会 到 品牌 的 精神 、 个 性 和 文化 内 涵 ， 还 要 借助 典故 、 故 事 、 仪 式 和 和 人物 等 文化 载体 进行 传播 ， 比 如 可 口 可 乐 的 诞生 传奇 、 
联想 的 创业 故事 、 海 尔 的 磺 冰 箱 故事 等 ， 这 让 品牌 文化 鲜 活 和 生动 起 来 ， 凝 聚 具有 忠诚 度 的 品牌 消费 群体 ， 并 形成 以 品牌 来 连接 
的 品牌 文化 。 


2.6.2 ”迅雷 超级 会 员 品 牌 的 运 襄 推广 


品牌 运营 很 多 体现 在 运营 活动 上 。 迅 雷 超 级 会 员 的 运营 活动 不 单单 是 一 个 或 两 个 专题 页 面 ， 而 是 一 套 完整 的 品牌 形象 活动 策 
划 。 从 品牌 定位 到 策略 ， 视 完 设 计 深入 到 品牌 的 每 一 个 接触 点 的 细 忆 ,如 LOGO、 字 体 设 计 、Slogan、 预 热 页 面 、 官 网 友 布 页 
面 、 公 仔 实 物 等 ， 目 标 在 于 让 你 无 论 何 时 何 地 接触 到 该 品牌 ， 都 会 留 下 一 致 协调 的 品牌 印象 。 如 果品 牌 协调 性 模糊 会 造成 不 易 识 
别 ， 延 续 和 统一 性 较 弱 ， 没 有 特色 ， 在 长 期 的 营销 策略 中 会 逐渐 失去 市 场 亮 争 力 。 所 以 ， 要 根据 目 己 的 品牌 特征 ， 用 富有 创意 和 
一 致 性 的 方式 去 表达 品牌 活力 ， 给 用 户 一 个 购买 它 的 理由 ， 显 得 尤为 重要 。 


超级 会 员 高 于 普通 会 员 和 日 金 会 员 ， 每 个 会 员 都 有 目 身 的 尊贵 之 处 ， 区 别 在 功能 、 视 免得 号 、 运 营 策 略 等 方面 。 超 级 会 员 是 


比 其 他 两 个 会 员 更 尊贵 的 一 种 仔 任 ， 服 务 于 局 凯 用 户 。 所 以 ， 一 开始 我 们 融 想 打造 一 个 坚实 的 品牌 形象 ， 并 能 突破 迅雷 会 员 以 往 
的 品牌 理念 ， 形 成 目 己 独 有 而 强大 的 品牌 记忆 点 。 

前 期 会 挖掘 目标 对 象 ， 对 竞 品 进行 分 析 ， 对 用 户 进行 调查 研究 ， 紧 接 痢 做 一 系列 方案 案 划 ， 我 们 不 只 是 提供 几 个 方案 来 选 
择 ， 而 是 尝试 找到 一 种 我 们 认为 在 战略 上 具有 创造 性 和 可 行 性 的 方法 ， 这 样 会 在 有 限 的 时 间 内 更 有 效 地 执行 创意 方案 。 


1. 超 级 会 员 预 热 与 上 友 布 页 面 


超级 会 员 的 预 热 和 友 布 分 两 步 完 成 。 第 一 步 是 预 热 页 面 ， 原 型 图 如 图 2-141 所 示 。 这 是 一 个 排版 简洁 、 信 息 量 较 少 的 专题 页 
面 ， 甚 至 很 空 的 画面 ， 所 有 内 容 均 在 一 屏 显示 ， 适 当 冒 险 打 朴 平 衡 ， 争 取 达 到 视 沈 上 的 尺 艳 。 还 可 以 加 入 动画 ， 将 静物 转化 成 生 
动 活泼 的 “生命 体 ”。 


图 2-141 超级 会 员 预 热 页 面 原型 图 


乍 乞 进行 需求 分 析 和 设计 分 解 。 


主题 分 析 : 超级 会 员 的 预 热 页 面 是 第 一 次 面向 用 尸 公 开 亮 相 ， 所 以 显得 尤为 重要 ， 无 论 是 视 完 还 是 呈现 方式 都 会 影响 到 人 们 
对 它 的 第 一 印象 。 设 计 专 题 页 面 时 延续 了 超级 会 员 的 品牌 定位 : 无 比 苯 贵 、 高 级 品质 的 理念 。 


文案 切入 : “特权 王者 ”这 个 关键 词 带 有 神秘 感 ， 而 且 第 一 次 公开 面世 ,不禁 会 联想 到 有 个 霸气 无 比 的 身影 从 天 而 降 ， 看 不 
清 它 的 具体 形象 ， 通 过 轮廓 表现 出 来 这 种 气势 。 


主题 元 床 : 王者 形象 设 定 和 超级 会 员 LOGO 的 结合 。 王 者 形体 使 用 迅雷 原 有 的 公仔 轮廓 ， 初 去 各 种 细节 留 下 外 形 和 轮廓 。 参 


考 并 戏 页 面 的 风格 ,设计 一 个 黑金 风格 的 形象 ， 如 图 2-142 所 示 。 


图 2-142 创意 参考 方案 


为 了 整体 营造 一 种 有 力量 


效果 上 ， 分 了 三 步骤 : 


图 2-143 ”超级 会 员 预 热 页 面 一 一 发 布 效 果 


打破 黑暗 前 的 宁静 。 
` 王者 从 天 而 降 地 爆 出 。 
. 超级 会 员 LOGO 随 着 火光 出 现 。 


预 热 页 面具 有 一 定 的 神秘 感 ， 并 没有 告诉 用 户 具 体 是 什么 产品 ， 预 热 到 第 7 天 才 放 出 超级 会 员 的 LOGO 和 正式 页 面 。 超 级 会 
员 正 式 友 布 页 面 是 新 加 在 会 员 官 网 的 一 级 导航 栏目 中 的 ， 既 要 与 官网 的 风格 保持 统一 ， 也 要 有 超级 会 员 上 自己 的 品牌 记忆 和 识别 
度 。 在 一 个 新 产品 还 未 扎根 在 用 尸 脑 海中 时 ， 不 宜 做 跳 脱 一 致 性 的 尝试 。 所 以 ， 在 Banner 处 延续 了 超级 会 员 的 LOGO 风 格 并 介 
绍 了 超级 会 员 的 四 大 包月 特权 ， 如 图 2-144 所 示 。 


超级 会 员 嘉 年 华 页 面 是 超级 会 员 后 期 品牌 运营 推广 的 典型 案例 ， 很 好 地 诠释 了 超级 会 员 品 牌 运 营 推 广 的 特色 。 黑 与 金 搭 配 出 
金属 感 与 高 级 质感 ， 并 在 主题 文案 周围 用 了 一 些 元 素 增加 画面 的 氛围 感 。 这 次 背景 色 并 没有 全 部 使 用 黑色 ， 而 是 利用 首 屏 背 景 的 
线条 网 状 的 透视 感 搭建 出 三 角形 状 ， 一 方面 引导 用 户 视 党 同 下 ， 另 一 方面 通过 切换 颜色 分 割 背 景 ， 让 整个 页 面 不 会 太 黑 以 至 于 造 
成 用 户 心理 上 的 压抑 。 第 二 屏 以 下 的 内 容 ， 比 如 “会 员 特 权 ” 和 “活动 规则 ”用 于 阅读 的 文案 较 多 ， 所 以 背景 比较 适合 用 亮色 来 
衬托 。 在 设计 移动 端 时 根据 其 特殊 性 做 了 调整 和 适 配 ， 如 图 2-145 所 示 。 移 动 端 页 面 如 图 2-146 所 示 。 


超级 会 员 正 式 页 面 
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图 2-146 ”超级 会 员 问 年 华 页 面 移动 端 效 果 


2.6.3 ”品牌 文化 建 与 影响 


品牌 不 仅 是 产品 的 识别 标志 ， 更 代表 着 公司 的 文化 形象 。 品 牌 引起 的 情感 反应 ， 是 品牌 的 长 期 价值 ， 而 要 建立 起 这 种 价值 ， 
就 要 建立 品牌 和 用 户 之 间 的 情感 联系 。 所 以 ， 要 打造 属于 超级 会 员 的 产品 IP， 文 化 束 变 得 必 不 可 少 。 


1. 公 体形 象 定位 
超级 公仔 的 形象 定位 是 在 不 断 地 设计 探索 中 挖掘 出 来 的 : 有 反差 靖 。 为 什么 会 这 样 定 位 ? 


反攻 彰 是 指 ACGN 人 物 表现 出 与 原本 形象 不 同 的 特征 或 多 种 互 为 矛盾 的 特征 同时 存在 。 这 两 种 或 多 种 明 点 相互 矛盾 ， 产 生 反 
帮 却 又 相互 讨 托 。 表 现形 式 多 种 多 样 ， 可 大 体 归纳 为 时 间 空 间 反 寿 ， 性 格 反 差 ， 外 狐 形 象 反 差 等 。 


超级 会 员 在 前 面 的 品牌 塑造 中 的 质感 是 比较 硬朗 和 高 级 的 ， 想 要 在 超级 公仔 的 设计 上 形成 一 种 反 考 明 ， 表 现 出 与 一 开始 超级 
会 员 出 场 时 不 相同 的 姿态 或 者 属性 ， 这 种 新 的 尝试 说 不 定 能 营造 出 一 种 新 的 超 乎 意料 的 体验 和 明 点 。 


以 迅雷 蜂鸟 为 原型 ,性别 男 ， 外 表 荫 六 电 ， 内 在 高 冷 而 性 感 。“ 藤 ”通过 外 形 表现 ， 圆 润 单纯 ， 更 接近 动物 本 身 的 特色 ， 没 
有 过 多 的 拟人 化 “高 冷 ” 通 过 它 的 眼神 和 外 包 沪 来 传递 ， 并 使 用 迅雷 品牌 文化 中 弟 见 的 黄色 和 蓝 色 作为 主 色 调 ， 黄 色 公 仔 命 


为 Xun (中 文 名 为 : 迅 迅 ) ， 赣 色 公 仔 命 名 为 Lei (中 文 名 : 8) ， 这 样 有 足够 的 品牌 记忆 点 与 市 面 上 的 公仔 形成 帮 异 化 ， 如 
图 2-147 所 示 。 
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为 什么 要 做 两 只 不 同 颤 色 、 同 样 外 形 的 公仔 呢 ? 一 万 面 是 为 满足 后 期 的 营销 策划 : 开通 半年 的 超级 会 员 赠送 一 只 ， 开 通 一 年 
的 超级 会 员 赠 送 两 只 ; 另 一 方面 ， 两 只 公仔 像 一 对 兄 月 ， 显 得 更 热 疝 ， 且 没有 单 只 出 现时 的 冷清 。 比 如 LineFriends 在 亚洲 的 影 
响 力 非常 强大 ，2014 年 腾讯 推出 了 QQ Family， 造 成 的 影响 力 远 比 从 前 的 一 只 QQ 公仔 要 大 得 多 。 所 以 ， 超 级 公仔 这 样 设 定 的 目 
的 束 是 为 将 来 的 扩展 做 好 充足 的 准备 。 


这 样 的 反 关 上 戎 更 容易 让 儿 重 和 年 轻 的 用 户 接受 和 喜欢 。 我 们 曾经 针对 迅雷 用 户 做 过 一 项 调查 ， 数 据 显 示 有 80% 的 用 户 是 80 
后 (25~ 3622) 的 日 领 ， 他 们 一 般 都 有 家 庭 ， 所 以 这 样 的 公仔 不 仅 可 以 上 自己 留 作 纪念 ， 还 可 放 在 家 里 给 老婆 和 驴子 。 事 实 上 ， 
超级 公仔 友 放 后 赢得 了 很 好 的 芭 啊 ， 年 轻 用 户 和 儿 重 都 很 喜欢 这 种 Q 耳 的 造型 ， 收 到 这 种 具有 纪念 意义 的 礼物 ， 大 多 都 会 形成 二 
次 传播 一 一 朋友 圈 分 享 。 
2. 平 面 形象 转化 为 实体 产品 


在 3D 建 模 时 需要 重新 思考 和 改变 ， 对 建 模 工程 师 的 要 求 会 更 高 ， 需 要 有 视 咯 设计 师 的 艺术 修养 和 能 力 。 在 第 一 次 建 模 中 很 
快 束 遇 到 了 很 大 的 困难 ， 在 一 周 内 迅速 反馈 和 优化 ， 历 经 5 次 修改 ， 最 终 定 稿 。 中 间 经 历 了 无 数 次 的 沟通 ， 需 要 到 远 在 异地 的 三 
家 与 雕刻 师 传 当面 沟通 和 确认 每 一 个 细节 。 由 于 生产 中 过 到 的 各 种 随机 因素 ,导致 成 品 和 建 模 效果 存在 些许 差距 ， 并 没有 完全 达 
到 设计 师 追 求 的 完美 效果 ， 但 整个 环节 都 是 设计 师 杀 目 跟 进 ， 把 关 每 个 环 书 和 细节 ， 尽 量 让 最 终 产 品 达 到 预期 的 效果 。 


经 过 此 次 从 平面 设计 稿 到 实物 的 过 程 ， 基 本 搞 清 楚 了 如 何 让 最 终 严 品 达 到 预期 效果 这 个 问题 ， 总 结 出 以 下 几 氮 : 
“ 现状 调查 研究 。 

. 咨询 专业 人 士 。 

遵循 生产 流程 。 

实时 反馈 和 优化 。 


超级 公仔 的 效果 如 图 2-148 ~ 图 2-150 所 示 。 


图 2-148 超级 公仔 Xun 3D 建 模 


三 视图 (—) 


图 2-149 ”超级 公仔 Lei 3D 建 模 三 视图 (二 ) 


SUPERVIP 


92-150 超级 公仔 效果 图 


包 妆 盒 的 设计 、 和 生产、 优化 也 在 同时 进行 ， 最 终 效 果 如 图 2-151 所 示 。 


图 2-151 @ 2 £ 2 E 


Xun 和 Lei 都 是 超级 会 员 的 专属 公仔 ， 用 于 赠送 和 答谢 超级 会 员 用 户 ， 非 超级 用 户 场景 均 不 可 擅 用 ， 这 是 为 了 保持 超级 会 员 
的 尊贵 和 采 潍 的 一 贯 品牌 属性 。 


3. 超 级 公仔 运营 推广 


超级 公仔 首 友 ， 仪 限 在 该 页 面 开 通 半 年 超级 会 员 时 送 1 只 ， 开 通 1 年 超级 会 员 送 2 只 ， 如 图 2-152 所 示 。 在 第 二 屏 介绍 了 超级 
会 员 的 四 大 包月 特权 ， 第 三 屏 可 360 度 查看 超级 公仔 的 外 形 ， 第 四 屏 强 调 了 超级 公仔 专属 于 开通 了 超级 会 员 的 用 性。 在 设计 风格 
上 延续 了 超级 会 员 高 级 的 品牌 特质 ， 并 邀请 了 当时 《直播 吧 女 神 》 项 目 组 中 人 气 最 高 的 女神 做 代言 人 。 女 神 手 心里 捧 荐 肉 坟 的 超 
级 公仔 ， 让 整个 画面 更 富有 收 到 新 年 礼物 的 幸福 感 和 甜蜜 感 。 美 女 与 公仔 相配 会 增加 产品 本 身 的 魅力 值 ， 美 好 的 事物 更 容易 引起 
人 们 的 关注 和 喜欢 ， 而 且 整 个 页 面 的 色调 高 级 中 上 略 珊 活泼 ， 一 切 束 没 那 么 高 冷 ， 而 且 又 贴近 生活 。 


将 公仔 的 设计 初衷 一 一 肥大 六 代入 到 页 面 中 ， 我 们 的 用 己 更 多 的 是 成 熟 的 男性 用 尸 ， 所 以 这 种 运营 策划 无 疑 是 通过 一 种 创 
意 和 惊喜 满足 了 超级 会 员 对 高 品质 的 消费 需求 。 由 于 公仔 生产 工期 较 长 ， 标 题 和 文案 会 不 定期 变化 ， 所 以 直接 用 了 可 编辑 的 字 
体 ,方便 修改 ， 在 外 面 加 了 礼物 盒 的 线条 来 衬托 。 并 不 是 所 有 的 专题 页 面 都 需要 字体 设计 ， 需 要 根据 具体 情况 来 判断 ， 保 证 商业 
价值 与 艺术 品质 ， 同 时 提高 页 面 的 灵活 性 和 随机 应 变 的 能 力 ， 最 后 出 来 的 效果 同样 很 高 级 。 


对 应 的 移动 端 页 面 根据 具体 情况 重新 做 了 调整 ， 在 手机 第 一 屏 突出 强调 了 主题 文案 、 产 品 和 开通 BUTTON。 背 景 底 色 用 了 
纯 黑 ， 一 方面 是 为 了 减少 页 面 的 加 载 时 间 ， 另 一 方面 是 为 了 延续 超级 会 员 的 品牌 色 ， 最 终 整个 页 面 的 风格 很 好 地 诠释 了 超级 会 员 
公仔 的 品质 感 与 活泼 的 特点 ， 如 图 2-123 所 示 。 
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图 2-152 ”超级 公仔 发 布 一 一 PC 端 页 面 


| 享 4 大 包月 特权 送 限量 版 公仔 


Ri 30004 


只 适 现 在 开通 超级 会 员 的 你 


‚288 


享 4 大 包月 特权 送 限 量 版 公仔 


图 2-153 ”超级 公仔 发 布 移动 端 页 面 


4 品牌 应 用 一 一 中 秋月 饼 盒 包装 设计 


在 2016 年 的 中 秋月 饼 礼 会 的 包 妆 设计 上 推出 了 超级 会 员 纪念 版 〈 见 图 2-154) ， 仪 赠送 给 迅雷 公司 内 部 员工 及 其 家 属 ， 以 及 
所 有 战略 合作 伙伴 。 


图 2-154 “中秋 节 月 饼 盒 平面 设计 图 


月 饼 盒 的 设计 理念 延续 了 超级 会 员 的 黑金 品牌 色 ， 又 加 入 了 浓 浓 的 思念 之 情 ， 这 种 思念 漫 过 山 合 、 笼 日 你 我 ， 在 浪漫 的 月 圆 
СЛН 512-93. 
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超级 会 员 一 推出 融 取 得 了 很 好 的 成 绩 ， 用 户 人 数 猛烈 增长 并 具有 持续 性 。 根 据 后 期 对 用 户 的 调查 和 用 户 在 其 他 迅雷 项 目 平台 


的 行为 显示 : 大 多 数 开通 超级 会 员 的 用 户 看 重 的 是 它 的 尊贵 与 秒 焰 的 品牌 文化 。 这 样 的 结果 基本 达到 我 们 一 开始 的 品牌 运营 设计 
的 设计 目标 。 


27 H5 转 化 与 传播 这 的 分 析 与 思考 


H5 是 非常 有 效 的 推广 运营 方式 ，2013 年 时 只 有 行业 内 部 人 士 才 知晓 ， 而 四 年 后 的 今天 ，H5 已 然 成 为 移动 互联 网 营销 中 最 火 
热 的 媒介 载体 。 那 么 ， 如 何 利用 这 种 媒介 载体 制作 出 一 个 高 转化 率 与 传播 率 的 营销 案例 呢 ? 


2.7.1 ”一 个 必 酷 好 玩 的 案例 


近 两 年 中 ，“ 烃 酷 好 于 ”几乎 成 为 H5 的 一 个 热门 标签 ,各 大 品牌 也 纷纷 以 此 为 嗪 头 制 作 各 种 吸 人 眼球 的 案例 。 一 时 间 ， 内 
容 是 否 好 玩 或 者 炫 酪 成 为 衡量 一 个 H5 品 质 优 务 的 默认 标准 。 我 们 暂且 抛 开 这 种 国有 的 标准 观念 ， 通 过 理性 的 分 析 看 看 是 人 否 炫 酷 
好 玩 的 案例 都 具备 优质 的 转化 率 / 二 次 传播 率 。 


特 先 ， 我 们 可 以 先 回 忆 下 我 们 曾经 都 见 过 哪 尝 炫 酪 好玩 的 案例 ， 同 时 再 将 以 下 两 个 问题 市 入 到 我 们 的 思考 中 反问 目 己 : 
‚ 真 的 有 你 想 要 看 到 或 者 需要 的 东西 吗 ? 


. 你 愿意 花 多 少 成 本 为 之 分 享 呢 ? 
1. 真 的 有 你 想 要 看 到 或 者 需要 的 东西 吗 ? 


襄 到 炫 酪 好玩， 相信 大 家 对 2015 年 “ 吴 亦 几 即 将 入 伍 ”的 案例 并 不 会 太 卫生 ，“ 吴 亦 几 即将 入 伍 ” 以 颇 有 了 跨 头 的 创意 和 优 
秀 的 节奏 控制 给 大 家 市 来 一 次 精彩 的 感官 体验 。 


那么 ， 现 在 我 们 需要 抛 开 现象 分 析 本 质 。 吴 亦 几 案例 的 实质 是 借助 吴 亦 儿 为 《全 面 突 击 》 手 游 进行 推广 ， 其 目的 是 为 手 六 
APP 拉 下 载 量 和 新 增 用 户 ， 同 时 也 是 对 IP 的 认 知 大 的 推广 。 


《全 民 突 击 》 是 腾讯 制作 的 一 款 3D 枪 战 手 游 ， 发 行 于 2015 年 。 游 戏 结合 了 FPS 和 TPS 等 射击 模式 。 以 定点 瞄准 射击 、 和 线 避 掩 
体 为 游戏 的 基础 操作 ， 同 时 在 PK 模式 增加 了 自由 移动 射击 的 操作 体验 。 玩 家 在 游戏 中 可 以 培养 角色 、 佣 兵 ， 升 级 武器 和 载 具 ， 
还 可 以 在 战斗 中 使 用 道具 、 雇 佣 好 友 一 起 和 参战。 


《全 民 突击 》 的 用 户 群 体 主 要 是 12 ~ 25 允 的 男性 用 尸 ， 而 吴 亦 几 案 例 的 浏览 量 72% 来 自 于 女性 用 尸 群 体 。 一 位 典型 女性 用 
尸 的 操作 行为 旅程 图 如 图 2-156 所 示 。 


Т 情绪 低谷 
92-156 用户 操作 行为 旅程 图 


通过 旅程 图 的 分 析 可 以 得 知 ，72% 的 女性 用 尸 会 被 “ 吴 亦 几 ” 和 “参军 ”这 两 个 关键 词 吸引 而 点 开 案 例 ， 同 时 会 在 看 到 内 容 
效果 的 第 一 时 间 达 到 情绪 的 峰值 ， 这 些 都 是 吴 亦 几 明 星 效 应 结合 模拟 来 电 效 果 产 生 的 心里 映射 。 当 女性 用 户 继 续 同 下 观看 时 会 友 
现 这 其 实 是 个 枪战 类 的 手 洲 广告， 那么 逐渐 的 ， 内 容 开 始 失 去 吸引 效应 时 ， 情 绪 也 回落 到 低谷 值 。 


即使 到 了 案例 结 ， 也 很 难 转化 这 部 分 女性 用 户 ， 因 为 H? 的 目标 用 户 需 求 和 实际 观看 的 用 户 的 需求 有 侦 差 。 


朋友 图 分 享 的 操作 看 似 简单 ， 育 后 其 实 有 着 复杂 的 心理 环境 因素 。 微 信 朋 友 圈 是 个 社交 工具 ， 对 社交 互动 双方 有 价值 的 社交 
行为 才 会 被 彼此 认可 ， 反 之 则 会 遭 到 反感 ， 当 反感 替 积 到 一 定 程 度 时 则 会 被 屏 敞 。 所 以 ， 当 你 选择 的 分 享 内 容 不 能 给 对 万 市 来 价 
值 或 认可 时 ， 那 么 这 条 朋友 轿 的 内 容 是 有 成 本 的 ， 成 本 来 自 于 你 在 这 个 社交 圈 内 建立 的 认可 度 ， 这 也 是 为 什么 微 商 、 代 购 等 群体 
太 的 内 容 在 朋友 圈 很 难得 到 目 友 性 的 二 次 传播 。 因 为 他 们 分 享 的 内 容 企 消耗 朋友 圈 内 部 的 信任 和 认可 。 所 以 ， 当 一 位 女性 用 户 进 
来 后 还 愿意 分 享 的 概率 会 相对 较 小 。 图 2-157 所 示 是 女性 用 户 心 理 旅 程 。 


КЕ РС 


图 2-157 女性 用 户 心 理 旅 程 图 


但 吴 亦 几 案 例 这 么 受 欢 迎 ， 是 因为 ， 制 作 团队 对 整体 效果 以 及 节奏 的 把 挥 非常 出 色 ， 加 上 新 床 和 流畅 的 体验 让 用 尸 印 象 深 
刻 。 相 较 之 下 ， 之 后 的 几 款 ( 见 图 2-158) 相似 度 极 高 的 H5 却 未 能 到 达 这 个 高 度 。 


和 


ШИНЧЕ МАНТ 


图 2-158 ”相似 的 H5 案 例 


《乐事 : 猴 年 猴 会 玩 ， 把 乐 市 回 家 》《 卫 宝 : 日 百 何 给 你 一 个 惊喜 》《 百 事 可 乐 : 乐 南 回 家 》 等 都 不 缺乏 明星 坐镇 ， 更 不 缺 
乏 炫 酷 的 交互 ， 但 传播 效果 和 转化 都 一 般 ， 都 没有 达到 吴 亦 几 案 例 的 高 度 。 由 此 可 以 判定 ， 市 场 的 传播 效果 好 坏 与 明星 代言 和 区 
互 玩法 并 不 构成 因果 关系 ， 吴 亦 几 案例 之 所 以 这 么 受 欢 迎 ， 很 大 程度 和 人们 的 新 鲜 感 和 类 有关， 一 旦 这 种 类 型 再 出 现 第 二 个 或 者 第 
三 个 ， 束 很 可 能 无 法 达到 之 前 的 市 场 效 果 。 

炉 酷 好 玩 对 一 个 H5 案 例 固 然 重 要 ， 但 当 你 希望 它 能 产生 更 多 的 价值 时 ， 还 需要 从 更 深层 次 的 原理 出 友 ， 思 考 如 何 将 目标 用 
户 需 要 的 东西 呈现 在 他 们 眼前 (转化 率 ) ? 什么 样 的 内 容 能 被 分 享 (二 次 传播 率 ) ? 


2.7.2 将 目标 用 户 需 要 的 乐 西 择 现在 他 们 眼前 


如 果 你 在 开始 的 三 分 钟 内 没有 让 大 家 觉得 有 趣 ， 就 是 你 的 失败 。 


一 一 暴雪 SVP 创 意 部 门 Chris Metzen 


是 的 ,没有 人 愿意 把 时 间 沪 费 在 目 己 不 感 兴趣 的 事物 上 ， 残 像 没 人 会 为 不 好 吃 的 食物 买单 ， 没 人 会 掏 钱 看 一 场 达 然 无 味 的 电 
影 ， 更 不 会 有 人 愿意 耐 着 性 子 看 完 一 份 抓 不 到 重点 的 H5 案 例 。 


如 果 你 想 让 目 己 的 创意 得 到 其 他 人 的 关注 和 认可 ， 首 先 你 得 在 尽 可 能 短 的 时 间 内 抓 住 他 们 的 注意 力 ，H5 也 不 例外 。 


我 不 会 直接 告诉 你 也 无 法 告诉 你 ， 你 的 目标 用 户 会 需要 什么 。 这 么 具体 的 内 容 你 得 根据 实际 情况 做 更 有 针对 性 的 判断 。 但 
， 这 里 有 4 个 小 技巧 能 从 侧面 帮助 你 将 目标 用 尸 需 要 的 东西 呈现 在 他 们 眼前 。 


HI 


技 15 一 : 逻辑 清晰 ， 内 容 简 洁 


1956 年 ， 乔 治 - 米 勒 对 短 时 间 记 忆 能 力 进行 了 定量 研究 ， 他 友 现 人 类 头脑 最 好 的 记忆 状态 能 记录 下 7+2 项 信息 块 ， 在 记忆 了 5 
到 9 项 甚至 是 更 多 的 内 容 时 大 脑 束 容易 出 错 。 所 以 ， 如 果 你 不 希望 你 的 目标 用 尸 在 读 到 一 半 时 束 出 现 不 知 所 云 的 状态 ， 那 么 你 最 
好 在 一 开始 束 清 晰 地 规划 好 你 的 内 容 逻 辑 ， 尽 可 能 保持 在 5 到 9 页 。 


还 有 一 点 也 非 划 重要 ， 如 果 你 的 页 面 内 容 过 多 和 烦琐 ， 也 会 影响 页 面 的 初次 加 载 效率 。 平 均 加 载 超过 5 秒 的 案例 会 有 749% 的 


ВР, 
技巧 二 : 合理 控制 字号 


随 着 移动 端 媒 介 的 友 展 ， 移 动 阅读 体验 逐 潮 被 重视 。 平 均 每 人 每 天 的 阅读 时 长 为 30 分 钟 左右 ， 你 的 内 容 是 否 满 足 移动 阅读 
体验 束 成 为 一 个 基础 门槛 ， 如 果 用 尸 看 不 清 或 者 看 着 吃力 ， 跳 出 率 会 高 居 不 下 。 


20 ~ 50 岁 之 间 的 合适 阅读 距离 为 48 ~ 50cm， 可 接受 的 最 小 字号 为 24pt 左 右 ， 提 供 舒 适 体 验 的 字号 在 32pt 左 右 。 经 测试 ， 
同一 篇 案例 ， 经 过 调整 字号 后 的 内 容 ， 平 均 每 页 停留 时 长 能 提升 1.5 ~ 2 秒 。 


技巧 三 : 不 要 过 早 暴 露 你 的 目的 


一 般 的 电脑 厂商 会 以 这 样 的 口吻 来 销售 自己 的 产品 : “我 们 做 世界 上 最 棒 的 电脑 ， 设 计 精美 ， 功 能 强大 ， 且 界面 友好 简单 。 


想 买 一 台 吗 ?“ 


是 否 当 他 开始 介绍 设计 精美 的 时 候 束 已 经 不 想 再 继续 听 下 去 了 ? 为 什么 ?因为 这 些 陈 词 滥 调 早 已 让 你 失去 兴趣 。 那 么 ， 我 们 
不 妨 再 看 看 苹果 公司 是 怎么 说 的 : “我 们 做 的 每 一 件 事情 ， 都 是 为 了 突破 和 创新 。 我 们 坚信 应 该 以 不 同 万 式 进 行 思考 。 我 们 挑战 
现状 的 方式 是 把 我 们 的 产品 设计 得 无 可 挑 吻 ， 像 艺术 品 一 样 值得 被 拥有 。 这 残 是 我 们 对 新 一 代 电 脑 的 追求 ， 想 买 一 台 吗 ? ”从 这 
两 个 案例 可 以 看 出 ， 过 早 暴露 自己 的 目的 不 好 。 


这 也 许 束 是 商业 价值 和 用 尸体 验 价值 做 到 比较 令 人 满意 的 平衡 后 所 产生 的 内 容 。 所 以 ， 在 情况 允许 的 条 件 下 ， 多 其 配 商 业 价 
值 和 用 户 体验 价 人 的 平衡 也 许 是 留 住 你 的 目标 用 户 最 有 效 的 一 招 了 。 


技巧 四 : 让 有 和 触 友 行为 的 按钮 足够 醒目 易 懂 


利用 最 少 的 时 间 辅 助 用 户 做 出 最 合适 的 决 荣 能 大 大 降低 用 户 的 试销 成 本 ， 正 如 菲 次 定律 中 所 提 到 的 ， 从 一 个 起 始 位 置 移动 到 
最 终 目 标 所 需要 的 时 间 由 两 个 参数 来 决定 ， 即 到 目标 的 距离 和 目标 的 大 小 。 


在 图 2-159 中 ， 普 通 的 用 户 在 右边 样式 按钮 的 平均 停留 时 间 比 左边 样式 按钮 要 少 0.5 秒 左右 。 


同时 ， 市 有 和 触 友 行 为 的 按钮 样式 也 影响 用 户 的 决策 成 本 ,减少 用 尸 的 决策 成 本 也 是 减少 用 尸 在 当前 页 面 流 失 率 的 有 效 办 法 之 


不 市 Icon 提示 的 button 桩 式 附带 Icon 提示 的 button 样 式 
图 2-159 ”按钮 Icon 提示 示范 


273 什么 样 的 内 容 才 能 引起 分 训 ? 


2016 年 7 月 10 日 一 则 来 自 Pokemon Go 官方 Twitter 的 友 言 令 整个 中 国 区 的 游戏 玩家 陷入 了 无 比 的 焦急 之 中 ，“ 中 国 的 玩家 
你 们 好 ， 我 们 已 经 紧急 修复 了 一 个 让 中 国 玩家 可 以 玩 到 《Pokemon GO》 的 Bug， 现 在 已 经 恢复 到 不 能 玩 的 状态 了 。 给 大 家 添 


麻烦 了 很 抱歉 ! ”可 就 在 短 短 几 天 后 ， 朋 友 圈 里 却 陆 陆 续 续 地 晒 出 了 大 家 在 游戏 中 抓 到 宠物 的 截图 。 原 来 大 家 都 迫不及待 地 要 体 
验 这 款 风 摩 全 球 的 AR (Augmented Reality) 游戏 ， 哪 怕 是 通过 翻 墙 的 手段 。 


上 面 所 摘 述 的 这 段 场景 充分 地 展示 了 这 天 游戏 的 魅力 ， 可 为 什么 大 家 又 会 在 短 短 的 几 天 内 不 约 而 同 地 晒 出 “成 果 ” 呢 ?在 分 
享 心理 学 上 ， 我 们 把 这 种 行为 背后 的 驱动 诱因 定性 为 “ 目 我 标榜 ”和 “拓展 /维持 社交 天 系 ”。 前 者 是 分 享 者 通过 将 结果 公布 于 
众 ， 从 而 博得 外 界 的 认可 和 即时 成 束 感 。 而 后 者 是 分 享 者 也 希望 通过 得 到 外 界 的 认可 后 能 逐渐 建立 起 或 继续 维护 在 这 个 社交 圈 内 
的 关系 链 。 


所 以 况 ， 分 享 心理 驱动 因素 能 更 好 地 帮助 我 们 找 出 那些 值得 锐 人 追捧 和 分 享 的 内 容 。 那 么 ， 我 们 首先 得 了 解 “ 分 享 ” 和 “人 
类 基础 需求 ”的 关系 。 


图 2-160 所 示 可 以 看 到 马 斯 洛 原 理 结构 图 和 分 享 状态 结构 图 的 关系 成 负 相 关 关 系 。 


从 图 2-160 中 我 们 可 以 看 出 处 于 马 斯 洛 金字 塔 的 顶端 的 人 只 是 少数 ， 但 他 们 对 分 享 的 需求 却 达 到 了 最 大 值 ， 二 者 负 相 关 。 也 
就 是 说 ，“ 分 享 ” 实 则 是 一 种 高 层次 的 生活 需求 ， 人 们 在 生理 需求 被 逐渐 满足 后 才 会 慢 慢 开始 对 “分 享 ” 的 追求 。 这 类 高 层次 需 
求 具体 化 后 可 以 划分 为 图 2-161 所 示 五 个 类 别 。 


因为 标榜 上 自我 和 拓展 /维持 关系 前 边 介绍 过 了 ， 故 这 里 仅 对 余下 3 种 进行 简单 介绍 。 


图 2-160” 马 斯 洛 金字 塔 与 分 享 状态 的 关系 


标榜 目 我 拓展 / 维持 关系 利他 
to define ourselves to grow and nourish our to bring valuable and 
to others relationship entertaining content to others 


РЕНЕ | 
to get the word out about 自我 实现 
causes or brands 


self-fulfillment 


图 2-161 五 种 内 了 驱动 分 享 因素 


1. 利 他 


利他 主义 ， 分 享 对 目 己 或 者 他 人 (大 多 数 为 后 者 ) 有 利 的 事物 来 获得 大 家 的 认可 和 信任 ， 同 时 也 实现 了 上 自我 的 价值 。 目 
前 比较 常见 的 市 有 分 享 经 济 属性 的 案例 (比如 各 类 打车 软件 的 红包 福利 ) 都 是 在 利他 。 


2. 呼 吁 或 倡导 


享 者 通过 分 享 自 己 对 某 事件 或 观点 持 有 的 态度 (支持 或 反对 ) ， 同 时 呼吁 /倡导 其 他 人 能 和 上 自己 一 起 对 这 些 事 件 和 观点 保 
持 相同 的 态度 。 这 类 的 案例 以 心灵 鸡汤 、 实 事 新 闻 (例如 马 航 M375 失 事 事 件 ) 居多 。 


3. 目 我 实现 
与 标榜 目 我 有 类 似 之 处 ， 标 榜 目 我 是 以 其 他 人 为 对 象 ， 而 目 我 实现 是 以 目 己 为 对 象 。 通 弟 在 完成 了 一 件 让 目 己 总 得 能 力 和 洪 
现 感 最 3 


力 得 到 了 友 挥 的 事情 ， 又 或 是 目 己 的 价值 得 到 了 体现 的 事情 ( 偏 主 观 意 识 ) 时 ， 目 我 实 5, 


2.7.4 四 种 党 欢迎 的 H5 类 型 


1 .小 戏 类 


《孤独 实验 室 》 是 陌 陌 和 贾樟柯 导演 一 起 合作 的 案例 ( 见 图 2-162) ， 是 2015 年 下 半年 最 有 喷头 的 H5 之 一 ， 以 百 万 的 参与 
量 席 卷 朋友 圈 。 其 内 容 是 通过 连续 的 测试 题 来 于 别 操作 者 的 孤独 指数 并 定位 同类 型 的 人 群 有 多 少 ， 先 让 用 户 找 到 共鸣 点 ， 然 后 通 
过 标榜 目 我 的 心理 驱使 用 户 进行 分 享 ， 博 得 认可 或 者 在 其 社交 体系 中 完善 和 目 我 形象 。 
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图 2-162 《孤独 实验 室 》H5 截 图 


测试 /游戏 类 H5 需 要 极其 信 单 的 规则 让 用 尸 能 在 第 一 时 间 理 解 并 参与 进来 ， 页 面 首 屏 和 最 后 一 屏 的 平均 停留 时 间 比 中 间 页 面 
平均 停留 时 间 长 。 按 钮 在 第 一 屏 的 点 击 率 最 高 ， 第 二 屏 开 始 依 次 又 减 ， 到 了 最 后 一 屏 勾 会 有 所 回升 。 因 为 在 中 间 页 的 任何 点 击 以 
及 拟 击 之 外 的 行为 都 在 增加 用 尸 的 操作 成 本 ， 往 往 会 导致 用 尸 忽 略 或 者 流失 。 


2. 故 事 类 


相信 大 家 一 定 看 过 《 猫 和 老鼠 》 的 动画 ,我 们 不 妨 回 头 思 考 下， 在 现实 生活 中 人 们 是 对 大 老鼠 的 ， 并 且 坚 信和 养 猫 能 用 来 对 付 
讨厌 的 老鼠 。 但 是 ， 在 动画 中 树立 起 的 形象 却 是 ， 每 当 杰 到 (老鼠 ) 开始 戏弄 汤姆 (н) 时 ， 才 是 人 们 最 乐于 看 到 的 场景 。 如 此 
的 反差 ， 通 过 故事 的 包 闪 融 能 转变 人 们 在 现实 生活 中 对 老鼠 反感 的 态度 ， 这 惑 是 进 故 事 的 力量 。 


《 首 草 先生 的 情书 》 也 是 一 个 会 讲 故事 的 好 例子 ( 见 图 2-163) ， 前 文通 过 摘 述 对 妻子 的 愧 交 博 得 用 户 的 同情 和 感动 ， 末 尾 
将 主打 的 产品 包 妆 成 是 对 妻子 的 补偿 来 赢得 最 终 的 认可 。 确 实 很 竺 合 阅读 用 户 的 心理 场景 ， 同 时 能 让 用 尸 产生 共鸣 并 转化 。 


92-163 《 首 草 先生 的 情书 》H5 截 图 


如 果 从 传播 学 的 维度 来 进行 分 析 ， 一 个 故事 类 型 的 H5 应 该 拥有 性 格 鲜 明 的 角色 ， 了 矛盾 化 的 剧情 ， 视 完 泻 染 的 主题 背景 等 。 
这 些 元 素 的 组 合 搭配 就 是 为 了 让 用 尸 更 有 代入 感 ， 能 让 用 户 产 生 共 鸣 并 且 建 立信 任 。 


ЛАТА ЕНН Уа аја ал К? 不 得 不 说 心 灵 鸡 汤 准 确 地 抓 住 了 那些 情感 相对 脆弱 又 缺乏 理性 的 群 


体 。 用 一 个 简单 而 生动 的 故事 让 人 产生 信任 感 和 共鸣 ， 然 后 用 精 昼 胜利 法 来 考 舞 人 们 的 情绪 。 当 感性 思维 的 人 受到 感动 或 者 误 舞 


时 整 会 增强 分 享 的 欲望 ， 他 们 也 希望 能 被 人 理解 。 


《我 的 深圳 下 雪 了 》 残 是 这 么 一 蒜 能 瞬间 扣 燃 用 尸 内 心 那 份 感动 的 H5 ( 见 图 2-164) ， 通 过 摘 述 寞 乡 人 在 外 打拼 的 场景 ， 
起 用 户 的 归属 情怀 。 在 深圳 这 种 绝 大 部 分 都 是 异乡 人 的 城市 ， 能 很 快 找到 大 量 的 共鸣 者 ， 二 次 传播 的 效果 目 然 不 俗 。 
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图 2-164 《我 的 深圳 下 雪 了 》H5 截 图 


4. 创 意 视 频 类 


人 们 忌 是 会 被 新 鲜 好 玩 的 内 容 所 吸引 ， 而 这 类 吸引 眼球 的 内 容 一 般 有 这 么 一 个 核心 要 素 : 矛盾 。 一 部 好 的 电视 剧 或 者 好 的 电 
影 往往 苑 斥 着 各 种 明 的 或 暗 的 矛盾 ， 平 淡 无 奇 的 剧情 根本 无 法 让 人 印象 深刻 ， 我 们 一 般 把 这 种 矛盾 称 之 为 “戏剧 性 ” 


我 们 不 得 不 说 的 《Next idea x 故 宫 》 和 《 蔡 之 谦 史 上 最 疯狂 的 广告 》 都 是 优秀 的 代表 作 ， 从 它们 的 命名 结构 上 来 看 残 已 经 
拥有 了 “戏剧 性 ”的 要 素 ，“Next idea” 与 “ 故 旧 ”是 一 对 矛盾 ，“ 人 薛之谦” 与 “史上 最 疯狂 ”又 是 另 一 对 矛盾 。 内 容 都 是 精 
心 剪辑 和 设计 出 来 的 ， 从 古 画 中 跳出 来 的 星 融 到 刷 朋友 圈 ; 从 现实 中 的 真人 角色 到 漫画 中 的 虚拟 角色 ;无 一 例外 都 是 充满 了 各 种 
丰富 的 矛盾 体 ， 再 加 上 精 展 的 配乐 和 视 儿 ， 很 难 让 人 不 为 之 称赞 ， 这 也 是 为 什么 它们 能 频频 获得 二 次 转 友 的 原因 。 


移动 营销 类 H5 是 近 几 年 H5 应 用 的 一 个 缩影 。 移 动 端 HTML5 标 记 语 言 在 未 来 商业 中 的 价值 是 不 可 小 凯 的 ， 目 前 仅 仪 只 是 建立 
在 静态 的 阅读 场景 上 ， 未 来 当 ibeacon、AR 等 元 素 融 入 进来 时 ， 我 们 相信 会 出 现 更 多 动态 化 、 移 动 化 的 场景 体验 。 


第 3 章 ” 互 联网 品牌 设计 


3.1 ”迅雷 品牌 的 铸造 和 传承 


品牌 设计 是 一 种 个 性 化 的 创造 ， 要 区 别 于 各 种 类 型 的 产品 ， 且 要 易于 识别 和 记忆， 好 的 品牌 设计 始 于 创造 一 种 独特 的 个 性 特 
征 。 为 了 让 品牌 与 它 特 定 的 市 场 联系 起 来 ， 这 个 品牌 需要 具体 化 并 且 是 引信 注 目的 ， 把 品牌 特征 转化 成 可 视 的 形象 也 是 设计 的 魅 
力 所 在 。 


3.1.1 МАЛУ 


企业 品牌 是 在 企业 成 立 初期 设 定 的 ， 通 党 都 与 它 所 提供 的 特定 产品 或 服务 相 联 系 ， 在 随后 的 经 营 过 程 中 ， 不 会 轻易 调整 。 企 
业 品牌 应 当 与 产品 专属 领域 密切 相关 ， 便 于 客 己 形成 清晰 的 认 知 。 丰 富 、 凸 现 企业 品牌 的 内 涵 是 一 个 长 期 的 过 程 ， 需 要 企业 予以 
重视 。 


标志 LOGO 是 品牌 形象 的 核心 部 分 ， 它 由 简单 、 显 奢 、 易 识别 的 形象 、 图 形 或 文字 符号 构成 ， 具 有 表达 意义 、 情 感 和 指令 行 
动 等 作用 。 标 志 设 计 属 于 图 形 设 计 ， 与 其 他 图 形 表现 手 法 既 有 相似 之 处 ， 又 有 不 同 。 标 志 设 计 要 和 简练、 概括， 要 求 十 分 苛刻 ， 要 
完美 到 几乎 找 不 到 更 好 的 奉 代 方案 ， 其 难度 比 其 他 任何 图 形 设计 都 要 大 得 多 。 因 此 ， 一 个 企业 品牌 标志 的 设计 也 是 企业 严谨 态度 
的 体现 。 好 的 标志 设计 ， 一 般 会 从 三 个 方面 入 手 : 定义 、 图 形 、 色 彩 。 


1. 迅 雷 品 牌 标志 的 定义 


我 们 只 有 深入 了 解 企业 的 行为 特征 和 核心 竞争 力 ， 才 能 找到 一 个 恰当 的 视 帝 图 形 符号 作为 品牌 的 图 形 标志 。 每 个 企业 的 文 
化 、 定 位 、 环 境 不 同 ， 可 以 采用 象征 性 、 比 喻 性 、 故 事 性 等 手法 ， 使 企业 抽象 的 精神 与 理念 ， 通 过 一 个 视 况 载体 表现 出 来 ， 寻 找 
的 过 程 束 是 品牌 定义 的 过 程 。 


迅雷 的 前 身 是 三 代 科 技 开 友 有 限 公 司 ， 它 于 2002 年 年 底 由 邹 胜 龙 乞 生 和 程 海 先生 于 美国 硅 合 创建 。2003 年 1 月 ， 三 代 科 反 
回国 友 展 ， 并 于 1 月 29 号 正式 成 立 三 代 科 技 中 国运 营 中 心 。 三 代 科 技 立足 于 互联 网 的 内 容 传输 和 下 载 ， 三 代 科 技 将 传统 的 服务 器 
多 线程 下 载 和 新 兴 的 P2P 技 术 相 结合 ， 开 发 出 “迅雷 下 载 客 尸 端 ”， 解 决 了 服务 器 资源 瓶 贷 和 P2P 传 输 的 不 可 控制 性 的 星 端 ， 为 
互联 网 用 户 市 来 亚 秒 级 的 下 载 速度 的 同时 ， 也 对 下 载 用 户 的 安全 性 和 内 容 上 友 布 的 可 监控 性 提供 了 牢靠 的 保障 。 在 用 户 寻 找 下 载 资 
源 上 ， 三 代 科 拉 首 次 提出 了 “搜索 得 到 即 下 载 得 到 ”的 新 概念 ， 并 应 用 于 “迅雷 在 线 下 载 引擎”。 “迅雷 人 在线 下 载 引 擎 ”依靠 目 


身 庞 大 的 下 载 引 擎 数据 、 亚 秒 级 的 反应 速度 、 庞 大 的 服务 器 集群 ， 接 受 来 目 各 个 地 域 的 下 载 请 求 ， 并 把 每 一 次 下 载 过 程 纳入 数据 
库 ， 形 成 下 载 越 多 结果 越 准确 、 下 载 速度 越 快 的 民 性 循环 ， 一 改 传统 搜索 模式 中 搜索 到 | 数 十 乃至 数 百 相关 结果 却 很 少 能 下 载 的 局 
面 ， 为 中 国 互联 网 乃至 世界 互联 网 的 下 载 应 用 相关 行业 树 起 了 一 面 旗帜 。 


为 了 体现 我 们 的 传输 速度 ， 用 到 了 一 个 中 国人 耳熟能详 的 谚语 : “迅雷 不 及 掩 卫 之 势 ”， 以 此 加 强 品 牌 记忆 。 迅 雷 标 志 的 要 
求 也 应 运 而 生 : 第 一 ， 要 体现 我 们 是 以 “三 代 科技 ”为 背景 成 立 的 公司 ;第 二 ， 要 体现 我 们 的 数据 传输 速度 之 “ 快 ”。 


2. 迅 雷 标 志 的 图 形 设计 


在 确定 了 标志 的 定义 之 后 ， 我 们 要 开始 图 形 设 计 了 。 图 形 可 以 分 为 具象 、 象 形 和 抽 和 等 种 类 。 具 象 标志 任 选 择 题 材 时 ， 要 尽 
量 采 用 那些 人 们 融 悉 的 元 素 ， 并 在 此 基础 上 个 性 化 。 玖 悉 的 元 素 能 雷动 人 们 的 视 锅 昼 经 ， 引 起 共鸣 ， 是 产生 深刻 记忆 的 基础 。 象 
形 标 志 ， 是 在 具象 标志 的 基础 上 开始 简化 ， 提 炬 特征 形态 符号 来 传达 企业 的 天 键 信息 。 抽 和 象 标 志 图 形 是 留 下 一 部 分 想象 空间 给 观 
众 ， 制 造 标 志 的 好 奇 感 。 在 品牌 标志 的 设计 中 ， 三 种 方式 混合 搭配 ， 会 产生 更 加 别致 的 效果 。 迅 雷 的 标志 设计 残 是 一 个 混合 型 的 


案例 。 


迅雷 标志 要 体现 “三 代 科技 ”“ 快 ”的 合 义 ， 能 代表 “ 快 ”的 事物 很 多 ， 比 如 飞机 、 火 前， 甚至 穿越 时 空 的 UFO， 但 
三 代 互 联网 ”这 个 侣 义 确 是 比较 难处 理 的 ， 因 为 “三 ”任何 公司 都 可 以 使 用 ， 不 能 成 为 迅雷 专 有 的 符号 ， 因 此 我 们 把 重点 放 
了 “三 代 互 联网 ”的 合 义 体现 上 。 


HI 


Hh 


从 图 形 上 看 ，“ 三 ”更 符合 标准 的 正方 形 形 态 〈 见 图 3-1) ， 在 标志 设计 中 ， 最 终 设 计 的 图 形 在 形状 上 要 尽量 有 一 个 大 致 的 
要 求 ， 因 为 最 终 的 标志 都 将 应 用 在 实际 场景 中 ， 比 如 公司 的 背景 墙 、 企 业 文 档 、 网 站 等 ， 而 且 会 与 一 些 文 字 进 行 组 合 搭配 ， 因 此 
图 形 规则 程度 较 高 的 标志 会 优先 列 为 备 选 方案 。 
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图 3-1 关于 а” 5 еш 的 图 形 分 析 


基础 形态 有 了 方向 后 ， 融 要 把 “ 快 ”的 理念 体现 出 来 ， 具 和 象 的 机 和 火箭 等 是 “高 速 ”的 代表 ， 与 迅雷 公司 并 没有 直接 的 联 
系 ， 所 以 不 能 直接 使 用 。 大 目 然 也 许 能 给 我 们 一 些 灵 感 ， 所 有 行动 快速 的 动物 ， 都 具备 一 个 “加 速 ”的 功能 ， 比 如 海豚 的 头 部 和 
乌 类 的 头 部 都 是 一 种 形态 上 的 收缩 ， 这 样 的 形态 能 减少 空气 和 水 流 的 阻力 ， 我 们 的 设计 也 信和 睹 了 这 一 点 。 再 加 上 我 们 是 一 家 科技 
类 的 公司 ， 目 然 要 加 入 一 些 代表 科技 感 的 元 素 ， 这 里 我 们 选择 性 地 参考 了 一 些 “UFO” 元 素 ， 经 过 形态 上 的 优化 调整 ， 才 有 了 
迅雷 的 标志 ， 如 图 3-2 所 示 。 


3. 品 牌 对 于 色彩 的 选择 


人 是 色彩 动物 ， 生 理学 研究 告诉 我 们 ， 色 彩 往往 比 图 形 更 有 优势 。 色 彩 是 一 种 情感 ， 一 种 直 沉 的 反映 ， 因 此 ， 选 择 一 种 合适 
的 颜色 ， 能 为 标志 的 设计 市 来 匡 履 性 的 变化 。 每 种 颜色 因为 波长 的 不 同 ， 色 相 的 不 同 ， 具 有 不 同 的 性 格 和 情绪 。 色 彩 具有 传达 信 


恩 的 作用 ， 寻 找 企业 的 行业 特征 与 个 性 特征 ， 采 用 准确 的 色彩 ， 能 使 标志 图 形 更 为 精彩 与 传神 。 


比如 红色 ， 人 的 情绪 在 强烈 的 波动 时 ， 会 使 脸 通 红 。 如 果 人 们 了 采 痢 红色 看 一 定 的 时 间 ， 也 能 导致 心跳 加 快 、 肌 肉 兴 和 理 。 红 色 
是 表达 爱 的 色彩 ， 是 稳重 而 有 力 的 色彩 ， 极 富 闭 饰 性 的 色彩 。 象 征 信 息 : 热情 和 活力 ， 政 权 和 革命 ， 喜 庆 和 吉祥; 奢华 和 隆重 
危险 和 暴力 ， 高 贵 和 狂 野 。 蓝 色 让 人 心跳 减 慢 ， 体 温 降低 ， 具 有 平静 情绪 的 力量 ,使 人 感到 无 限 的 舒畅 、 清 流 。 和 象征 信息 : 年 


轻 、 目 然 、 休 闲 、 想 象 力 。 适 合 高 科技 、 工 业 、 海 洋 类 行业 ， 如 图 3-3 所 示 。 
第 三 代 互 联网 科技 人 敏捷 的 动物 为 了 减少 阻力 拥有 尖锐 的 头 部 


图 3-2 ”迅雷 企业 LOGO 的 创意 过 程 
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年 轻 自然、 休闲 、 想 象 力 、 
高 科技 


激情 的 红色 
热情 、 活 力 、 政 权 、 革 命 、 喜 庆 
吉祥 、 奢 华 、 隆 重 


图 3-3 色彩 的 性 格 分 析 


对 迅雷 公司 了 解 比较 深刻 的 朋友 应 该 知道 ， 迅 雷公 司 的 全 称 是 迅雷 网 络 ， 迅 雷 下 载 是 一 个 工具 类 的 产品 ， 蓝 色 更 符合 产品 和 


3.1.2 ”产品 品牌 时 传承 


产品 品牌 是 通过 塑造 一 个 有 吸引 力 的 品牌 形象 来 推动 产品 的 销售 或 推广 ， 只 需 考虑 该 产品 本 身 的 发 展 及 产品 所 在 行业 的 发 展 


雹 势 。 企 业 品 牌 以 目 身 信念 、 经 宫 理 念 、 业 务 友 展 方向 和 竞争 优势 为 导 同 ， 产 品 品牌 以 消费 者 为 导向 ， 满 足 消 费 痢 需求 是 产品 品 
牌 建设 的 根本 。 产 品 品牌 的 设计 可 以 根据 产品 阶段 的 需求 或 者 行业 的 要 求 随时 调整 ,企业 品 牌 只 会 根据 目 身 定位 而 存在 ， 这 是 当 
下 互联 网 行业 的 一 种 常态 。 我 们 经 常 可 以 看 到 ， 某 个 软件 产品 发布 了 新 版 本 之 后 ， 对 应 的 标志 (LOGO) 也 会 重新 设计 。 


产品 品牌 是 影响 企业 品牌 的 重要 因素 ， 它 们 之 间 仓 在 的 关系 叫 品牌 效应 。 用 户 会 因为 肯定 产品 而 信任 其 公司 ， 这 时 公司 再 推 
出 任何 新 产品 ， 融 比较 容易 航 用 户 所 接受 。 反 乙 ， 如 果 一 个 产品 遭 到 诉 病 ， 其 公司 也 很 难 书 用 户 所 接受 。 用 户 为 品牌 买单 ， 最 终 
买 的 还 是 产品 本 身 的 质量 。 从 一 个 产品 的 生命 周期 来 看 ， 如 果 没 有 创新 ， 束 会 逐渐 失去 公众 的 信赖 ， 企 业 的 品牌 影响 力也 会 逐渐 
消失 。 


塑造 产品 品牌 的 方法 ， 包 含情 感化 品牌 形象 的 定义 、 演 化 、 创 新 三 个 方面 。 
1. 情 感化 品牌 形象 的 定义 


情感 化 设计 是 措 以 人 和 物 的 情感 交流 为 目的 而 创作 的 行为 活动 ， 通 过 设计 手法 ， 对 产品 的 特质 元 素 进 行 整 合 ， 使 产品 可 以 通 
过 声音 、 形 态 、 寓 意 、 外 观 形象 等 方面 影响 人 的 听 帝 、 视 党 、 触 部 ， 从 而 产生 联想 ， 达 到 人 与 物 的 心灵 沟通 ， 从 而 产生 共鸣 。 这 
样 的 方法 要 体现 产品 代表 的 效用 、 功 能 、 品 人 位、 形式、 价格、 便利、 服务 等 。 产 品 品牌 可 以 更 加 聚焦 并 拥有 具体 的 形态 ， 在 品牌 
塑造 上 有 更 多 表现 的 形式 ， 因 此 在 产品 得 到 消费 者 认可 之 后 ， 产 品 的 品牌 形象 是 很 容易 被 宣传 与 传播 的 。 


产品 品牌 聚焦 的 具体 形 仿 其 实 束 是 产品 形 销 ， 腾 讯 的 企鹅 ， 百 度 的 熊 ， 美 团 的 宾 髓 ， 这 些 都 是 情感 化 的 品牌 形象 代表 。 这 种 
理念 来 自 于 我 们 祖先 ， 古 时 候 每 个 部 落 都 拥有 目 己 的 图 腾 ， 并 把 图 腾 符 号 化 ， 刺 在 身上 ， 男 在 领地 的 分 界线 上 ， 凸 显 各 个 部 藻 的 
异化 ， 也 是 增强 团结 条 誉 感 的 一 种 手段 ， 这 个 真理 底层 的 逻辑 我 们 沿用 至 今 。 


如 果 产 品 形象 本 身 的 特质 与 产 品 特色 相符 ， 这 会 让 你 的 产品 品牌 离 成 功 更 进一步 。 比 如 大 众 所 熟 知 的 ， 鸽 子 代 表 和 平 ， 论 米 
代表 美好 ， 孩 童 代表 纯真 可 爱 .…….. 迅 雷 的 蜂鸟 形象 其 实 是 2010 年 才 出 世 的 ( 见 图 3-4) ， 在 此 之 前 一 直 使 用 的 是 迅雷 企业 品牌 的 
标志 。 企 业 品牌 的 标志 含义 如 上 文 所 讲 ， 是 以 三 代 互 联网 科技 的 含义 而 设计 的 ， 是 一 个 高 大 上 的 理念 ， 但 如 果 没 有 详细 地 了 解 公 
司 背 景 ， 会 是 个 星 汲 难 慌 的 标志 ， 作 为 企业 品牌 是 完美 的 ， 但 是 作为 产品 品牌 却 并 不 合适 ， 单 纯 图 形 的 闫 品 形象 很 难 在 产品 目 身 
得 到 应 用 ， 在 推广 过 程 中 也 不 利于 产品 品牌 的 记忆 。 迅 雷 下 载 是 一 个 加 快 网 络 传 输 的 工具 软件 ， 我 们 传承 “ 快 ”的 理念 ， 联 想到 
了 体态 轻 锅 振 记 频率 最 快 的 蜂鸟 。2010 年 以 蜂鸟 形态 出 友 的 迅雷 软件 ， 获 得 了 前 所 未 有 的 成 功 ， 并 且 在 互联 网 行业 赢得 了 良好 
的 口碑 与 地 位 。 


图 3-4 2010 年 迅雷 7 发 布 的 蜂鸟 品牌 形象 


2. 由 蜂 乌 演化 而 来 的 雷 乌 


雷 乌 的 形象 是 基于 蜂 乌 诞生 的 ， 最 初 应 用 在 迅雷 官 万 的 论坛 、 网 站 和 客户 端的 提醒 页 面 ， 它 也 是 产品 情感 化 需求 的 产物 。 雷 
乌 形 象 频繁 活 跃 于 迅雷 的 产品 中 ， 是 迅雷 整个 产品 终 闯 的 宠儿 。 这 也 绿 于 产品 本 身 对 用 户 的 引导 ， 情 感化 的 品牌 形象 更 容易 让 人 
产生 记忆 ， 无 论 是 对 于 刚 接触 产品 的 新 人 ， 还 是 资深 用 户 ， 在 口碑 传播 方面 都 有 不 小 的 意义 。 我 们 可 以 通过 一 些 广告 和 推广 等 手 
段 让 产品 的 品牌 形象 不 断 上 曝光， 或 者 通过 形态 上 的 转变 ， 将 品牌 形象 注入 产品 之 中 ， 时 刻 都 在 提醒 用 户 “这 是 我 们 的 产品 形 
象 ”， 其 实 这 样 的 手段 只 有 一 个 目标 ， 束 是 加 强 品 牌 的 记忆 ， 提 高 产品 的 识别 度 。 


品牌 进化 融 是 与 时 俱 进 ， 一 个 产品 随 看 时 间 的 推移 和 目 身 的 友 展 ( 见 图 3-5 ~ 图 3-7) ， 总 会 在 扩 术 、 用 尸 群 体 或 用 户 习 惯 

等 万 面 脱离 时 代 的 要 求 ， 因 而 需要 调整 产品 定位 和 技术 对 新 。 因 此 ， 产 品 团队 必要 定期 回顾 和 分 析 外 界 环境 中 出 现 了 哪些 有 利和 

不 利 因 素 ， 反 省 目 身 的 优点 和 缺 点 ， 采 取 怡 当 的 措施 ， 始 终 与 时 代 和 用 户 保 持 同 步 ， 这 个 产品 进化 的 过 程 ， 也 是 产品 品牌 进化 的 
机 会 。 


等 业务 上 的 雷 鸟 卡通 形象 


游戏 


应 用 于 论坛 、 


图 3-5 


3. 创 新 是 产品 品牌 的 保鲜 剂 


产品 品牌 一 定 是 基于 产品 本 身 仔 在 的 ， 只 有 强力 的 运营 和 推广 是 不 够 的 ， 用 户 为 品牌 买单 ， 最 终 买 的 还 是 产品 本 身 的 服务 和 
功能 。 企 业 要 有 自己 的 核心 扩 术 ， 让 产品 在 相同 领域 内 做 到 独一无二 ， 这 样 更 容易 让 品牌 生存 并 友 挥 优势 ， 这 是 吾 古 不 变 的 道 
理 。2005 年 迅雷 残 致 力 于 网 络 数据 传输 扩 术 的 研 友 ， 目 前 除了 用 于 目 己 的 产品 外 ， 还 广 撑 了 很 多 互联 网 产品 的 数据 传输 服务 ， 
在 业界 做 到 了 独一无二 。 在 产品 品牌 建立 的 同时 ， 赢 得 了 用 户 对 企业 品牌 的 信任 ,之 后 做 任何 形势 的 推广 都 是 可 以 被 用 己 所 接受 
的 ， 因 此 品牌 也 是 促进 用 户 消费 的 基础 ， 这 也 是 迅雷 至今 能 够 活跃 于 互联 网 行业 的 关键 所 在 。 


3.1.3 ”招聘 与 品牌 的 联系 


人 才 对 于 每 一 家 企业 来 况 都 是 极为 重要 的 ， 面 对 新 的 友 展 机 遇 和 挑战 ， 招 聘 所 承担 的 企业 使 售 已 不 再 是 单纯 地 为 企业 招募 有 
用 之 才 ， 同 时 承担 了 宣传 企业 和 树立 企业 形象 的 使 依 。 现 实 中 ， 很 多 企业 往往 忽视 了 这 一 点 ， 不 重视 招聘 环节 的 各 项 细节 和 招聘 
团队 人 员 的 饰 选 ， 派 出 的 招聘 团队 人 员 素 质 不 遍 、 形 象 不 佳 、 专 业 不 精 ， 这 样 的 招聘 团队 不 但 不 能 完成 招 算 人才 的 重任 ， 不 经 意 
间 也 降低 了 企业 的 形象 ， 使 得 人 力 、 物 力 、 财 力 付 之 东 流 。 


迅雷 一 直 求 贯 看 渴 ， 对 于 招聘 这 个 环节 非 划 重视， 迅雷 主要 的 人 才 来 源 于 校园 招聘 和 社会 招聘 。 所 谓 物 以 类 聚 ， 人 以 群 分 ， 
优秀 的 企业 一 定 能 够 吸引 到 优秀 的 人 才 。 迅 雷 分 别针 对 校园 和 社会 两 个 渠道 设计 了 招聘 信息 发 布 平台 ， 让 信息 的 传递 更 有 针对 


° 


社会 招聘 面向 的 人 群 、 年 龄 阶层 相对 分 散 ， 要 有 更 强 的 包容 力 ， 社 会 招聘 平台 的 设计 难度 在 于 表现 形式 的 拿捏 ， 青 春 活力 会 
让 有 工作 经 验 的 人 认为 企业 不 稳重 ,迅雷 公司 创立 已 超过 十 年 ， 在 中 国 绝对 算是 互联 网 行业 的 “ 老 马 ”， 如 果 表现 形式 过 于 厚重 
会 让 年 轻 人 感到 压抑 ， 所 以 从 公司 上 自身 的 产品 定位 出 友 ， 以 嗅 探 星 域 的 主题 设计 了 社会 招聘 的 平台 ( 见 图 3-8) 。 


校园 招聘 面 对 的 人 群 很 集中 ， 都 是 在 校 大 学 生 ， 年 龄 集中 在 21 ~ 24 岁 ， 随 着 时 代 的 变化 ， 每 一 年 对 这 一 类 初出 茅 庐 的 青年 
都 有 不 同 的 定义 ， 他 们 青春 活力 的 思维 也 是 推进 企业 创新 的 源 录 。 面 对 他 们 ， 迅 雷 每 一 年 的 校园 招聘 主题 都 是 不 一 样 的 ， 在 校园 
招聘 平台 建设 和 传播 渠道 的 设计 上 用 了 更 多 新 奇 有 趣 的 形式 ， 吸 引 大 学 生 关 注 的 同时 也 传递 出 迅雷 追求 创新 的 精神 ， 如 图 3-9 所 


小 \。 


品牌 是 外 界 衡量 公司 的 标 尝 ， 它 需要 长 时 间 建 立 、 维 护 、 创 新 ， 承 载 了 公司 形象 和 商业 价值 。 但 是 外 界 对 品牌 的 认可 ， 最 终 
还 是 在 于 对 产品 的 认可 ， 我 们 可 以 学 习 多 种 品牌 营销 推广 的 策略 ， 可 以 让 品牌 价值 最 大 化 ， 但 是 如 果 消 费 者 买 到 的 产品 不 能 与 
牌价 值 对 等 的 时 候 ， 品 牌 束 会 受到 反作用 力 ， 导 致 不 可 挽回 的 结果 。 所 以 我 们 在 加 强 品 牌 前 ,切记 一 定 要 将 公司 的 产品 做 好 ,i 
样 产品 与 品牌 的 价值 才能 相互 作用 。 消 费 者 为 产品 质量 买单 ， 通 过 认可 产品 质量 ， 肯 定 产品 品牌 ， 再 因 品 牌 进行 后 续 消 费 ， 形 成 
民 好 闭环 ， 这 样品 牌 所 能 市 来 的 效益 也 会 快速 增长 。 


НП 


Хі 


图 3-9 2017 迅 雷 校园 招聘 官网 


品牌 设计 是 一 种 个 性 化 的 创造 ， 要 区 别 于 各 种 类 型 的 产品 ， 且 要 易于 识别 和 记忆 ， 好 的 品牌 设计 始 于 创造 一 种 独特 的 个 性 特 


征 。 为 了 让 品牌 与 它 特定 的 市 场 联 系 起 来 ， 这 个 品牌 需要 具体 化 并 且 是 引 人 注 目的 ， 把 品牌 特征 转化 成 可 视 的 形象 也 是 设计 的 魅 
力 所 在 。 


3.1.1 企业 品牌 的 天 造 


企业 品牌 是 在 企业 成 立 初 期 设 定 的 ， 通 单 都 与 它 所 提供 的 特定 产品 或 服务 相 联系 ， 在 随后 的 经 襄 过 程 中 ， 不 会 轻易 调整 。 企 
业 品牌 应 当 与 产品 专属 领域 密切 相关 ， 便 于 客 己 形成 清晰 的 认 知 。 丰 富 、 凸 现 企业 品牌 的 内 涵 是 一 个 长 期 的 过 程 ， 需 要 企业 予以 
重视 。 


标志 LOGO 是 品牌 形象 的 核心 部 分 ， 它 由 简单 、 显 奢 、 易 识别 的 形象 、 图 形 或 文字 符号 构成 ， 具 有 表达 意义 、 情 感 和 指令 行 
动 等 作用 。 标 志 设 计 属 于 图 形 设计 ， 与 其 他 图 形 表 现 手 法 既 有 相似 乙 处 ， 又 有 不 同 。 标 志 设 计 要 简练 、 概 括 ， 要 求 十 分 苛刻， 要 
完美 到 几乎 找 不 到 更 好 的 蔡 代 方案 ,其 难度 比 其 他 任何 图 形 设计 都 要 大 得 多 。 因 此 ， 一 个 企业 品牌 标志 的 设计 也 是 企业 严谨 人 态度 
的 体现 。 好 的 标志 设计 ， 一 般 会 从 三 个 方面 入 手 : 定义 、 图 形 、 色 彩 。 


1. 迅 雷 品 牌 标志 的 定义 


我 们 只 有 深入 了 解 企业 的 行为 特征 和 核心 竞争 力 ， 才 能 找到 一 个 恰当 的 视 帝 图 形 符号 作为 品牌 的 图 形 标志 。 每 个 企业 的 文 
化 、 定 位 、 环 境 不 同 ， 可 以 采用 象征 性 、 比 喻 性 、 故 事 性 等 手法 ， 使 企业 抽象 的 精神 与 理念 ， 通 过 一 个 视 竞 载体 表现 出 来 ， 寻 找 
的 过 程 残 是 品牌 定义 的 过 程 。 


迅雷 的 前 身 是 三 代 科 技 开 友 有 限 公 司 ， 它 于 2002 年 年 底 由 邹 胜 龙 乞 生 和 程 海 先生 于 美国 硅 合 创建 。2003 年 1 月 ， 三 代 科 反 
回国 友 展 ， 并 于 1 月 29 号 正式 成 立 三 代 科技 中 国运 言 中 心 。 三 代 科技 立足 于 互联 网 的 内 容 传输 和 下 载 ， 三 代 科 技 将 传统 的 服务 器 
多 线程 下 载 和 新 兴 的 P2P 拉 术 相 结合 ， 开 发 出 “迅雷 下 载 客 尸 端 ”， 解 决 了 服务 器 资源 尊 贷 和 P2P 传 输 的 不 可 控制 性 的 次 端 ， 为 
互联 网 用 户 市 来 亚 秒 级 的 下 载 速度 的 同时 ， 也 对 下 载 用 尸 的 安全 性 和 内 容 上 友 布 的 可 监控 性 提供 了 牢靠 的 保障 。 在 用 户 寻 找 下 载 资 
源 上 ， 三 代 科技 首次 提出 了 “搜索 得 到 即 下 载 得 到 ”的 新 概念 ， 并 应 用 于 “迅雷 在 线 下 载 引擎 ”。 “迅雷 在 线 下 载 引 擎 ”依靠 目 
身 庞 大 的 下 载 引 擎 数据 、 亚 秒 级 的 反应 速度 、 庞 大 的 服务 器 集群 ， 接 受 来 目 各 个 地 域 的 下 载 请 求 ， 并 把 每 一 次 下 载 过 程 纳入 数据 
库 ， 形 成 下 载 越 多 结果 越 准确 、 下 载 速度 越 快 的 民 性 循环 ， 一 改 传统 搜索 模式 中 搜索 到 | 数 十 乃至 数 百 相关 结果 却 很 少 能 下 载 的 局 
面 ， 为 中 国 互联 网 乃至 世界 互联 网 的 下 载 应 用 相关 行业 树 起 了 一 面 旗帜 。 


为 了 体现 我 们 的 传输 速度 ， 用 到 了 一 个 中 国人 耳熟能详 的 谚语 : “迅雷 不 及 掩 卫 之 势 ”， 以 此 加 强 品 牌 记忆 。 迅 雷 标 志 的 要 
求 也 应 运 而 生 : 第 一 ， 要 体现 我 们 是 以 “三 代 科技 ”为 背景 成 立 的 公司 ;第 二 ， 要 体现 我 们 的 数据 传输 速度 之 “ 快 ”。 


2. 迅 雷 标志 的 图 形 设计 


在 确定 了 标志 的 定义 之 后 ， 我 们 要 开始 图 形 设计 了 。 图 形 可 以 分 为 具象 、 象 形 和 抽 和 等 种 类 。 具 象 标志 任 选 择 题 材 时 ， 要 尽 
量 采 用 那些 人 们 融 悉 的 元 素 ， 并 在 此 基础 上 个 性 化 。 玖 悉 的 元 素 能 雷动 人 们 的 视 锅 昼 经 ， 引 起 共鸣 ， 是 产生 深刻 记忆 的 基础 。 象 
形 标 志 ， 是 在 具象 标志 的 基础 上 开始 向 化， 提炼 特 征 形态 符号 来 传达 企业 的 天 键 信息 。 抽 和 象 标志 图 形 是 留 下 一 部 分 想象 空间 给 观 
众 ， 制 造 标志 的 好 奇 感 。 在 品牌 标志 的 设计 中 ， 三 种 万 式 混 合 搭配 ， 会 产生 更 加 别致 的 效果 。 迅 雷 的 标志 设计 就 是 一 个 混合 型 的 


案例 。 


迅雷 标志 要 体现 “三 代 科技 ”“ 快 ”的 含义 ， 能 代表 “ 快 ”的 事物 很 多 ， 比 如 飞机 、 火 稍 ， 甚 至 穿越 时 空 的 UHFO， 但 
是 “三 代 互 联网 ”这 个 伟 义 确 是 比较 难处 理 的 ， 因 为 “三 ”任何 公司 都 可 以 使 用 ， 不 能 成 为 迅雷 专 有 的 符号 ， 因 此 我 们 把 重点 放 
到 了 “三 代 互 联网 ”的 伟 义 体现 上 。 


从 图 形 上 看 ，“ 三 ”更 符合 标准 的 正方 形 形 态 〈 见 图 3-1) ， 在 标志 设计 中 ， 最 终 设 计 的 图 形 在 形状 上 要 尽量 有 一 个 大 致 的 
要 求 ， 因 为 最 终 的 标志 都 将 应 用 在 实际 场景 中 ， 比 如 公司 的 背景 墙 、 企 业 文 档 、 网 站 等 ， 而 且 会 与 一 些 文 字 进 行 组合 搭 配 ， 因 此 
图 形 规则 程度 较 局 的 标志 会 优先 列 为 备 选 万 案 。 


图 3-1 关于 27 5 “а? 的 图 形 分 析 


基础 形态 有 了 万 向 后 ， 束 要 把 “ 快 ”的 理念 体现 出 来 ,具象 的 飞机 和 火箭 等 是 “高 速 ” 的 代表 ， 与 迅雷 公司 并 没有 直接 的 联 
系 ， 所 以 不 能 直接 使 用 。 大 目 然 也 许 能 给 我 们 一 些 灵 感 ， 所 有 行动 快速 的 动物 ， 都 具备 一 个 “加 速 ”的 功能 ， 比 如 海豚 的 头 部 和 
鸟 类 的 头 部 都 是 一 种 形态 上 的 收缩 ， 这 样 的 形态 能 减少 空气 和 水 流 的 阻力 ， 我 们 的 设计 也 借 瞧 了 这 一 点 。 册 加 上 我 们 是 一 家 科技 
类 的 公司 ， 目 然 要 加 入 一 些 代表 科技 感 的 元 素 ， 这 里 我 们 选择 性 地 参考 了 一 些 “UFO” 元素 ， 经 过 形态 上 的 优化 调整 ， 才 有 了 
迅雷 的 标志 ， 如 图 3-2 所 示 。 


3. 品 牌 对 于 色彩 的 选择 


人 是 色彩 动物 ， 生 理学 研究 告诉 我 们 ， 色 彩 往往 比 图 形 更 有 优势 。 色 彩 是 一 种 情感 ， 一 种 直 沉 的 反映 ， 因 此 ， 选 择 一 种 合适 
的 颜色 ， 能 为 标志 的 设计 市 来 站 履 性 的 变化 。 每 种 颜色 因为 波长 的 不 同 ， 色 相 的 不 同 ， 具 有 不 同 的 性 格 和 情绪 。 色 彩 具有 传达 信 
恩 的 作用 ， 寻 找 企业 的 行业 特征 与 个 性 特征 ， 采 用 准确 的 色彩 ， 能 使 标志 图 形 更 为 精彩 与 传神 。 


比如 红色 ， 人 的 情绪 在 强烈 的 波动 时 ， 会 使 脸 通 红 。 如 果 人 们 盯 着 红色 看 一 定 的 时 间 ， 也 能 导致 心跳 加 快 、 肌 肉 兴 盏 。 红 色 
是 表达 爱 的 色彩 ， 是 称 重 而 有 力 的 色彩 ， 极 富 半 饰 性 的 色彩 。 象 征 信 息 : 热情 和 活力 ; 政权 和 时 命 ; 膏 庆 和 言 祥 ; 奢华 和 隆重 
危险 和 暴力 ; 遍 贵 和 狂 野 。 蓝 色 让 人 心跳 减 慢 ， 体 温 降低 ， 具 有 平静 情绪 的 力量 ,使 人 感到 无 限 的 舒畅 、 清 流 。 象 征 信息 : 年 
轻 、 目 然 、 休 闲 、 想 象 力 。 适 合 遍 科技、 工业 、 海 洋 类 行业 ， 如 图 3-3 所 示 。 


敏捷 的 动物 为 了 减少 阻力 拥有 尖锐 的 头 部 


图 3-2 ”迅雷 企业 LOGO 的 创意 过 程 


激情 的 红色 科技 感 的 蓝 色 
热情 、 活 力 、 政 权 、 革 命 、 喜 庆 、 年 轻 、 自 然 、 休 闲 、 想 象 力 、 
=, жее, ШШ 高 科技 


图 3-3 色彩 的 性 格 分 析 


对 迅雷 公司 了 解 比较 深刻 的 朋友 应 该 知道 ， 迅 雷公 司 的 全 称 是 迅雷 网 络 ， 迅 雷 下 载 是 一 个 工具 类 的 产品 ， 蓝 色 更 符合 产品 和 


3.1.2 ”产品 品牌 时 传承 


产品 品牌 是 通过 塑造 一 个 有 了 吸引 力 的 品牌 形象 来 推动 产品 的 销售 或 推广 ， 只 需 考虑 该 产品 本 身 的 友 展 及 产品 所 在 行业 的 友 展 
雹 势 。 企 业 品 牌 以 目 身 信念 、 经 宫 理 念 、 业 务 友 展 方向 和 竞争 优势 为 导向 ， 产 品 品牌 以 消费 者 为 导向 ， 满 足 消 费 痢 需求 是 产品 品 
牌 建设 的 根本 。 产 品 品牌 的 设计 可 以 根据 产品 阶段 的 需求 或 者 行业 的 要 求 随时 调整 ， 企 业 品牌 只 会 根据 目 身 定位 而 存在 ， 这 是 当 
下 互联 网 行业 的 一 种 常态 。 我 们 经 常 可 以 看 到 ， 某 个 软件 产品 友 布 了 新 版 本 之 后 ， 对 应 的 标志 (LOGO) 也 会 重新 设计 。 


产品 品牌 是 影响 企业 品牌 的 重要 因素 ， 它 们 之 间 仓 企 的 天 系 叫 品牌 效应 。 用 户 会 因为 肯定 产品 而 信任 其 公司 ， 这 时 公司 再 推 
何 新 产品 ， 惑 比较 容易 被 用 户 所 接受 。 反 之 ， 如 果 一 个 产品 遭 到 诉 病 ， 其 公司 也 很 难 被 用户 所 接受 。 用 户 为 品牌 买单 ， 最 终 
买 的 还 是 产品 本 身 的 质量 。 从 一 个 产品 的 生命 周期 来 看 ， 如 果 没 有 创新 ， 束 会 逐渐 失去 公众 的 信赖 ， 企 业 的 品牌 影响 力也 会 逐渐 


消失 。 
塑造 产品 品牌 的 方法 ， 包 含情 感化 品牌 形象 的 定义 、 演 化 、 创 新 三 个 方面 。 
1. 情 感化 品牌 形象 的 定义 


情感 化 设计 是 措 以 人 和 物 的 情感 交流 为 目的 而 创作 的 行为 活动 ， 通 过 设计 手法 ， 对 产品 的 特质 元 素 进 行 整 合 ， 使 产品 可 以 通 
过 声音 、 形 态 、 寓 意 、 外 观 形象 等 方面 影响 人 的 听 帝 、 视 党 、 触 部 ， 从 而 产生 联想 ， 达 到 人 与 物 的 心灵 沟通 ， 从 而 产生 共鸣 。 这 
样 的 方法 要 体现 产品 代表 的 效用 、 功 能 、 品 人 位、 形式、 价格、 便利、 服务 等 。 产 品 品牌 可 以 更 加 聚焦 并 拥有 具体 的 形态 ， 在 品牌 
塑造 上 有 更 多 表现 的 形式 ， 因 此 在 产品 得 到 消费 者 认可 之 后 ， 产 品 的 品牌 形象 是 很 容易 被 宣传 与 传播 的 。 


产品 品牌 聚焦 的 具体 形 仿 其 实 束 是 产品 形 销 ， 腾 讯 的 企鹅 ， 百 度 的 熊 ， 美 团 的 宾 髓 ， 这 些 都 是 情感 化 的 品牌 形象 代表 。 这 种 
理念 来 自 于 我 们 祖先 ， 古 时 候 每 个 部 落 都 拥有 目 己 的 图 腾 ， 并 把 图 腾 符 号 化 ， 刺 在 身上 ， 男 在 领地 的 分 界线 上 ， 凸 显 各 个 部 藻 的 
卷 异 化 ， 也 是 增强 团结 和 秒 誉 感 的 一 种 手段 ， 这 个 真理 底层 的 逻辑 我 们 沿用 至 今 。 


如 果 产 品 形象 本 身 的 特质 与 产品 特色 相符 ， 这 会 让 你 的 产品 品牌 离 成 功 更 进一步 。 比 如 大 众 所 丈 和 的 ， 鸽 子 代 表 和 平 ， 化 水 
代表 美好 ， 孩 童 代表 纯真 可 爱 .…….. 迅 雷 的 蜂鸟 形象 其 实 是 2010 年 才 出 世 的 ( 见 图 3-4) ， 在 此 之 前 一 直 使 用 的 是 迅雷 企业 品牌 的 
标志 。 企 业 品 牌 的 标志 含义 如 上 文 所 讲 ， 是 以 三 代 互 联网 科技 的 含义 而 设计 的 ， 是 一 个 高 大 上 的 理念 ， 但 如 果 没 有 详细 地 了 解 公 
司 背 景 ， 会 是 个 星 汲 难 慌 的 标志 ， 作 为 企业 品牌 是 完美 的 ， 但 是 作为 产品 品牌 却 并 不 合适 ， 单 纯 图 形 的 闫 品 形象 很 难 在 产品 目 身 
得 到 应 用 ， 在 推广 过 程 中 也 不 利于 产品 品牌 的 记忆 。 迅 雷 下 载 是 一 个 加 快 网络 传 输 的 工具 软件 ,我 们 传承 “ 快 ”的 理念 ， 联 想到 
了 体态 轻 锅 振 妆 频率 最 快 的 蜂鸟 。2010 年 以 蜂鸟 形态 出 友 的 迅雷 软件 ， 获 得 了 前 所 未 有 的 成 功 ， 并 且 在 互联 网 行业 赢得 了 良好 
的 口碑 与 地 位 。 


图 3-4 2010 年 迅雷 7 发 布 的 蜂鸟 品牌 形象 


2. 由 蜂 乌 演化 而 来 的 雷 乌 


雷 乌 的 形象 是 基于 蜂 乌 诞生 的 ， 最 初 应 用 在 迅雷 官 万 的 论坛 、 网 站 和 客户 端的 提醒 页 面 ， 它 也 是 产品 情感 化 需求 的 产物 。 雷 
乌 形 象 频繁 活 跃 于 迅雷 的 产品 中 ， 是 迅雷 整个 产品 终 闯 的 宠儿 。 这 也 绿 于 产品 本 身 对 用 户 的 引导 ， 情 感化 的 品牌 形象 更 容易 让 人 
产生 记忆 ， 无 论 是 对 于 刚 接触 产品 的 新 人 ， 还 是 资深 用 户 ， 在 口碑 传播 方面 都 有 不 小 的 意义 。 我 们 可 以 通过 一 些 广告 和 推广 等 手 
段 让 产品 的 品牌 形象 不 断 上 曝光， 或 者 通过 形态 上 的 转变 ， 将 品牌 形象 注入 产品 之 中 ， 时 刻 都 在 提醒 用 户 “这 是 我 们 的 产品 形 
象 ”， 其 实 这 样 的 手段 只 有 一 个 目标 ， 束 是 加 强 品 牌 的 记忆 ， 提 高 产品 的 识别 度 。 


品牌 进化 融 是 与 时 俱 进 ， 一 个 产品 随 看 时 间 的 推移 和 目 身 的 友 展 ( 见 图 3-5 ~ 图 3-7) ， 总 会 在 扩 术 、 用 尸 群 体 或 用 户 习 惯 

等 万 面 脱离 时 代 的 要 求 ， 因 而 需要 调整 产品 定位 和 技术 对 新 。 因 此 ， 产 品 团队 必要 定期 回顾 和 分 析 外 界 环境 中 出 现 了 哪些 有 利和 

不 利 因 素 ， 反 省 目 身 的 优点 和 缺 点 ， 采 取 怡 当 的 措施 ， 始 终 与 时 代 和 用 户 保 持 同 步 ， 这 个 产品 进化 的 过 程 ， 也 是 产品 品牌 进化 的 
机 会 。 


等 业务 上 的 雷 鸟 卡通 形象 


游戏 


应 用 于 论坛 、 


图 3-5 


3. 创 新 是 产品 品牌 的 保鲜 剂 


产品 品牌 一 定 是 基于 产品 本 身 仔 在 的 ， 只 有 强力 的 运营 和 推广 是 不 够 的 ， 用 户 为 品牌 买单 ， 最 终 买 的 还 是 产品 本 身 的 服务 和 
功能 。 企 业 要 有 自己 的 核心 扩 术 ， 让 产品 在 相同 领域 内 做 到 独一无二 ， 这 样 更 容易 让 品牌 生存 并 友 挥 优势 ， 这 是 吾 古 不 变 的 道 
理 。2005 年 迅雷 残 致 力 于 网 络 数据 传输 扩 术 的 研 友 ， 目 前 除了 用 于 目 己 的 产品 外 ， 还 广 撑 了 很 多 互联 网 产品 的 数据 传输 服务 ， 
在 业界 做 到 了 独一无二 。 在 产品 品牌 建立 的 同时 ， 赢 得 了 用 户 对 企业 品牌 的 信任 ,之 后 做 任何 形势 的 推广 都 是 可 以 被 用 己 所 接受 
的 ， 因 此 品牌 也 是 促进 用 户 消费 的 基础 ， 这 也 是 迅雷 至今 能 够 活跃 于 互联 网 行业 的 关键 所 在 。 


3.1.3 ”招聘 与 品牌 的 联系 


人 才 对 于 每 一 家 企业 来 况 都 是 极为 重要 的 ， 面 对 新 的 友 展 机 遇 和 挑战 ， 招 聘 所 承担 的 企业 使 售 已 不 再 是 单纯 地 为 企业 招募 有 
用 之 才 ， 同 时 承担 了 宣传 企业 和 树立 企业 形象 的 使 依 。 现 实 中 ， 很 多 企业 往往 忽视 了 这 一 点 ， 不 重视 招聘 环节 的 各 项 细节 和 招聘 
团队 人 员 的 饰 选 ， 派 出 的 招聘 团队 人 员 素 质 不 遍 、 形 象 不 佳 、 专 业 不 精 ， 这 样 的 招聘 团队 不 但 不 能 完成 招 算 人才 的 重任 ， 不 经 意 
间 也 降低 了 企业 的 形象 ， 使 得 人 力 、 物 力 、 财 力 付 之 东 流 。 


迅雷 一 直 求 贯 看 渴 ， 对 于 招聘 这 个 环节 非 划 重视， 迅雷 主要 的 人 才 来 源 于 校园 招聘 和 社会 招聘 。 所 谓 物 以 类 聚 ， 人 以 群 分 ， 
优秀 的 企业 一 定 能 够 吸引 到 优秀 的 人 才 。 迅 雷 分 别针 对 校园 和 社会 两 个 渠道 设计 了 招聘 信息 发 布 平台 ， 让 信息 的 传递 更 有 针对 


° 


社会 招聘 面向 的 人 群 、 年 龄 阶层 相对 分 散 ， 要 有 更 强 的 包容 力 ， 社 会 招聘 平台 的 设计 难度 在 于 表现 形式 的 拿捏 ， 青 春 活力 会 
让 有 工作 经 验 的 人 认为 企业 不 稳重 ,迅雷 公司 创立 已 超过 十 年 ， 在 中 国 绝对 算是 互联 网 行业 的 “ 老 马 ”， 如 果 表现 形式 过 于 厚重 
会 让 年 轻 人 感到 压抑 ， 所 以 从 公司 上 自身 的 产品 定位 出 友 ， 以 嗅 探 星 域 的 主题 设计 了 社会 招聘 的 平台 ( 见 图 3-8) 。 


校园 招聘 面 对 的 人 群 很 集中 ， 都 是 在 校 大 学 生 ， 年 龄 集中 在 21 ~ 24 岁 ， 随 着 时 代 的 变化 ， 每 一 年 对 这 一 类 初出 茅 庐 的 青年 
都 有 不 同 的 定义 ， 他 们 青春 活力 的 思维 也 是 推进 企业 创新 的 源 录 。 面 对 他 们 ， 迅 雷 每 一 年 的 校园 招聘 主题 都 是 不 一 样 的 ， 在 校园 
招聘 平台 建设 和 传播 渠道 的 设计 上 用 了 更 多 新 奇 有 趣 的 形式 ， 吸 引 大 学 生 关 注 的 同时 也 传递 出 迅雷 追求 创新 的 精神 ， 如 图 3-9 所 


小 \。 


品牌 是 外 界 衡量 公司 的 标 尝 ， 它 需要 长 时 间 建 立 、 维 护 、 创 新 ， 承 载 了 公司 形象 和 商业 价值 。 但 是 外 界 对 品牌 的 认可 ， 最 终 
还 是 在 于 对 产品 的 认可 ， 我 们 可 以 学 习 多 种 品牌 营销 推广 的 策略 ， 可 以 让 品牌 价值 最 大 化 ， 但 是 如 果 消 费 者 买 到 的 产品 不 能 与 
牌价 值 对 等 的 时 候 ， 品 牌 束 会 受到 反作用 力 ， 导 致 不 可 挽回 的 结果 。 所 以 我 们 在 加 强 品 牌 前 ,切记 一 定 要 将 公司 的 产品 做 好 ,i 
样 产品 与 品牌 的 价值 才能 相互 作用 。 消 费 者 为 产品 质量 买单 ， 通 过 认可 产品 质量 ， 肯 定 产品 品牌 ， 再 因 品 牌 进行 后 续 消 费 ， 形 成 
民 好 闭环 ， 这 样品 牌 所 能 市 来 的 效益 也 会 快速 增长 。 


НП 


Хі 


图 3-9 2017 迅 雷 校园 招聘 官网 


过 十 几 年 的 友 展 ， 迅 雷 在 品牌 上 形成 了 诸多 标签 ,已 不 只 是 一 个 下 载 工 具 。 它 凭借 去 加速 方面 的 核心 技术 ， 集 成 了 包含 
载 、 游 戏 、 视 频 、 网 络 加 速 、CDN 应 用 等 多 种 服务 ， 甚 至 进军 了 目前 最 火热 的 VR 领域 。 所 以 ， 原 先 的 迅雷 网 络 已 经 无 法 承载 迅 
雷 迅 速 友 展 的 形象 。 现 在 ， 它 需要 以 新 的 形态 来 展示 公司 的 形象 ， 接 到 升级 迅雷 LOGO 设 计 这 个 任务 的 时 候 ， 激 动 的 同时 也 感到 
压力 很 大 ， 毕 葛 这 是 一 个 企业 的 形象 标志 ， 各 种 心情 过 后 ， 我 们 准备 先 从 老 版 本 的 迅雷 LOGO 分 析 着 手 。 


现 有 的 LOGO 由 三 部 分 组 成 : 图 形 + 汉 字 + 英 文 小 字 。 显 然 ， 英 文字 母 过 多 与 过 小 在 品牌 传播 上 已 经 是 阻碍 了 。 


为 了 保持 品牌 的 延续 性 ， 图 形 还 是 沿用 原来 的 ， 着 重 对 右边 的 文字 进行 整改 ， 由 “迅雷 网 络 ” 变 成 “迅雷 ”， 英 文 用 迅雷 的 
拼音 如 图 3-10 所 示 。 


я 
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43-10 ”迅雷 网 业 品 牌 LOGO 


т? 


3.2.1 ”企业 品牌 的 设计 进化 


文字 一 和 直 都 是 人 们 沟通 的 重要 载体 ， 在 设计 领域 ,文字 是 视 完 传达 的 重要 媒介 。 随 着 时 代 的 友 展 ， 包 含 文字 的 标志 设计 越 来 
越 多 。“LOGOTYPE” 局 的 定义 随 着 时 间 的 不 同 有 着 不 同 的 阶段 性 解读 ， 但 始终 包含 “ 字 ” “ 形 ” “完整 不 可 分 割 ”这 三 大 原 
则 。 文 字 的 设计 主要 从 字体 造型 、 字 体感 党 和 字体 性 格 三 个 方面 做 深入 了 解 。 


1. 中 文字 体 造 型 


现 有 的 LOGO 使 用 斜体 字 来 呈现 速度 ， 富 意 和 理念 传递 得 很 好 。 图 3-11 中 所 示 红色 圆 点 标 出 来 的 地 方 是 转角 的 细节 ， 使 整个 
字体 造型 看 起 来 更 加 圆润 ， 在 速度 中 突显 了 亲和力 。 


图 3-11 当前 LOGO 字 体 边 角 分 析 


倾斜 的 字体 相对 于 文字 较 长 的 字体 造型 来 说 要 更 合适 一 些 ， 因 为 整体 重心 的 高 与 整体 底 边 的 比值 较 低 ， 使 得 整体 看 起 来 更 稳 
重 些 ， 如 图 3-12 所 示 。 


图 3-12 ”当前 LOGO 图 形 稳定 性 分 析 


但 新 版 本 的 LOGO 字 体 部 分 只 有 两 个 字 “ 迅 雷 ”， 如 果 使 用 倾斜 字体 ， 整 体重 心 的 局 与 抵 边 的 比值 变 大 ， 会 使 整体 显得 很 不 
稳重 ， 因 此 我 们 打算 将 整体 造型 “ 奢 正 ”来 试 试看 ， 如 图 3-13 所 示 。 


整体 重心 的 高 与 度 边 的 比值 变 大 ， 显得 зеет 将 整体 造型 “ 几 正 ”的 效果 
图 3-13 ЖЕ" 是 为 了 解决 斜体 字 的 不 稳定 问题 
2. 中 文字 体 整 体感 完 


在 整体 摆 正 后 会 友 现 很 多 问题 ， 比 如 “ 雷 ” 字 右上 角 的 直角 感觉 要 突 几 些 ， 笔 画 过 多 而 导致 视 况 失去 了 平衡 ЭҺ нЕ 
的 地 方 大 过 雷 字 ， 也 会 导致 失衡 。 这 些 都 对 字 的 整体 感觉 有 很 大 的 影响 ， 接 下 来 对 这 些 地 万 进行 细 忆 分析 和 人 处理， 如 图 3-14 所 


引 
2 
о 


“ 雷 ” 字 的 石上 角 我 们 沿用 先前 LOGO 设 计 中 的 理念 ， 进 行 圆 角 设 计 ， 使 视 党 效果 更 柔和 些 ， 同 时 将 字 的 右 下 角 做 直角 处 
理 ， 使 乙 看 起 来 更 加 沉稳 ， 如 图 3-15 所 示 。 对 比 两 个 字 后 ， 确 实 后 面 这 个 字 整 体 要 更 沉稳 和 柔和。 这 些 字 的 细节 与 整体 体现 出 
的 气质 ， 可 以 展现 出 一 个 品牌 的 形象 。 


“ 迅 ” 字 中 宣 的 地 方太 过 雷 字 “ 雷 ” 字 进行 图 和 角 设计 ， 使 视觉 效果 更 柔和 些 


3-14 ”优化 天 正 后 的 字体 图 形 


93-15 反复 调整 新 LOGO 的 图 形 


3. 瑞 文字 体 造 型 


英文 字 和 中 文字 截然 不 同 ， 中 文 文字 各 具 独 立 字形 ， 而 英文 字 由 26 个 字母 排列 组 合 而 成 。 英 文字 结构 相对 简单 ， 主 要 由 和 直 
线 和 曲线 的 笔画 构成 。 


先前 LOGO 的 英文 字 部 分 和 当前 的 中 文字 明显 不 是 一 个 风格 ， 内 容 也 不 一 致 ， 因 此 对 英文 字 重 新 做 了 设计 。 按 照 中 文字 的 风 
格 ， 每 一 笔 都 不 是 均匀 的 粗细 ， 坚 笔画 会 比较 粗 ， 而 横 笔 画 相 对 较 细 ， 如 图 3-16 所 示 。 


图 3-16 ”整体 上 有 点 琐碎 ， 字 的 个 性 还 不 突出 


4. 英 文字 体感 沉 


调整 后 友 现 严 文 整体 上 有 后 琐 碎 ， 字 的 个 性 还 不 突出 。 于 是 又 尝试 了 用 大 写字 母 ， 使 之 更 为 整齐 ， 在 电脑 上 反复 调整 过 后 ， 
英文 字 的 线条 感 与 中 文字 一 致 ， 使 整体 看 起 来 更 加 协调 、 美 观 ， 如 图 3-17 所 示 。 


3-17 使 用 英文 大 写 突出 个 性 ， 最 终 调整 后 的 图 形 


5. 字 体 性 格 


造型 确定 后 需要 确定 字体 的 层次 感 和 闸 色 。 根 据 当下 的 设计 潮流 ， 层 次 感 上 使 用 局 平 化 的 设计 风格 。 


当 用 户 看 到 LOGO 时 最 直观 的 感受 主要 由 颜色 来 传达 。 品 牌 颜色 选择 的 是 科技 监 色 ， 延 续 迅 雷 品牌 的 DNA， 同 时 给 用 户 沉 
稳 大 气 、 技 术 可 靠 的 感觉 ， 如 图 3-18 所 示 。 


图 3-18 新 定义 的 企业 品牌 色 


3.2.2 ”新 版 LOGO 整 体 呈现 


接 下 来 对 LOGO 的 三 个 部 分 一 一 图 形 LOGO、 中 文 LGO、 英 文 LOGO 进 行 不 同 版 面 的 排版 设计 。 经 过 反复 对 比 与 讨论 ， 考 
虑 到 LOGO 的 多 种 使 用 场景 ， 最 终 选 择 方 案 A 做 进一步 优化 ， 万 案 A 中 右边 的 中 瑞 文 大 小 均等 使 得 LOGO 整 体重 心 偏 石 ， 于 是 将 
英文 比重 缩小 ， 看 起 来 更 均衡 ， 最 终 完 成 迅雷 品牌 LOGO 的 升级 ， 如 图 3-19 所 示 。 
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КЕН х lj | 1 El WEF 
A 方案 C 方 案 


ЖИМ ЕҤ! 
图 3-19 反复 对 比 组 合 形式 ， 选 择 方案 A 为 最 终 LOGO 


3.2.3 ”最 终 版 本 整体 上 的 优势 


最 终 版 本 在 整体 上 有 如 下 几 氮 优势: 


. 均衡 : 由 于 左 侧 是 图 ， 因 此 将 英文 字 “XUNLEI” 有 意识 地 向 右 侧 靠 ， 使 视觉 上 得 到 平衡 。 


“ 对 比 : 在 线条 的 粗细 和 扬 角 的 曲直 上 对 比 明显 ， 文 字 不 会 显得 呆板 ， 并 且 有 自己 的 个 性 。 
` 统一 : 统一 是 理性 的 结合 ， 其 精 风 在 于 “统一 中 有 变化 ， 变 化 中 求 统一 ，， 中 英文 线条 的 粗细 采用 统一 的 设计 ， 而 中 英文 


字 本 身 字 体 造 型 就 是 不 一 致 的 ， 因 此 实现 了 求同存异 ， 使 整体 不 会 显得 枯燥 无 味 。 


. 韵律 : 韵律 是 一 种 秩序 性 的 安排 ,文字 设计 中 的 竖 向 线条 采用 粗 线条 ， 横 向 线条 采用 细 线 条 ， 这 种 周期 性 的 规则 使 LOGO 
具有 韵律 感 ， 从 而 突出 LOGO 特色 。 


新 的 LOGO 人 在 不 同 场景 中 的 效果 如 图 3-20 所 示 。 
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МЎ 


Ай 讯 辆 


迅雷 开启 “ 星 创 计划 ” 


干 余 家 企业 禄 入 中 请 


在 品牌 设计 中 ，LOGO 的 设计 


天 重要 的 ， 它 代表 这 个 品牌 展示 的 形象 ， 是 品牌 的 窗口 
借用 德国 著名 设计 师 冯 德 里 希 说 过 的 一 句 话 : 
足 它 的 使 用 功能 的 同时 ， 


“LOGO 的 形象 具有 魔术 般 的 力量 ， 人 们 的 实现 无 法 避 开 那 伟 大 的 杰作 ， 在 满 
能 够 赋予 其 最 崇高 的 审美 需要 。”LOGO 的 创意 设计 要 在 基础 结构 上 寻求 创新 和 突破 ， 通 过 图 文 结合 ， 
不 仪 要 正确 地 传达 版 面 信 息 ， 更 要 符合 视 完 规律 ， 通 过 美感 去 打动 用 尸 ， 使 他 们 获得 美的 享受 。 

如 何 打 动用 尸 ， 让 他 们 获得 美的 享受 ? 这 似乎 很 抽象 ， 有 操 
是 有 方法 可 循 的 。 特 别 是 做 字体 时 ， 要 不 断 地 进行 细节 把 
慢 慢 体会 。 学 会 从 信息 化 、 视 3 


但 是 积 时 了 一 定 的 设计 经 验 和 优秀 的 设计 作品 后 ， 残 会 友 
宝 ， 整 体 观察 。 然 而 这 
息 化 、 视 完 化、 艺术 化 等 多 维 视 角 来 思考 设计 
1] 该 词 起 源 于 希腊 语 


过 程 需要 太 多 耐心 ， 
束 会 友 现 其 中 的 设计 之 
=: logos, 


文字 ” 


需要 在 设计 过 程 中 
， 现 在 简称 为 LOGO 


迅雷 是 以 提供 数据 传输 服务 而 被 人 知晓 的 企业 ， 运 今 为 止 提 供 这 项 服务 已 有 十 余年 ， 科 技 不 断 向 前 友 展 ， 下 载 万 式 与 用 户 需 
求 也 在 不 断 变 化 ， 新 的 使 用 习惯 与 资源 途径 正在 悄然 出 现 。2016 年 ， 我 们 重新 定义 了 迅雷 新 产品 的 体验 方式 ， 虹 变 是 新 版 迅雷 


的 主题 ， 这 也 是 重 塑 产品 品牌 的 机 会 ， 如 图 3-21 所 示 。 


2 


м. 


85 87 89 


与 公司 品牌 logo 保持 一 致 ， 当 那 是 个 网 络 资源 有 限 的 年 代 ， 我 2016 年 我 们 再 次 起 航 ， 在 提供 

时 的 品牌 是 三 代 科技 ， 又 像 来 自 们 让 很 多 人 完成 了 不 能 完成 的 任 稳定 数据 传输 的 同时 ， 提 供 更 多 

外 太空 的 飞行 器 ， 科技 感 十 足 务 ， 当 时 的 品牌 形象 是 振 起 频率 资源 推荐 ， 这 一 次 我 们 将 有 什么 
最 快 的 蜂鸟 样 的 改变 ? 


图 3-21 迅雷 客户 端 LOGO 〇 的 历史 
迅雷 9 的 LOGO 设 计 是 一 个 极其 曲折 的 过 程 ， 设 计 师 团队 前 后 参与 三 个 月 才 最 终 完 成 。 


这 次 LOGO 的 设计 有 三 “ 计 ” 可 循 。 


3.31 “万 变 不 离 其 示 的 “衍生 计 ” 


衍生 ， 指 演变 而 产生 ， 从 母体 物质 得 到 的 子 体 ， 由 子 体 再 作为 母体 衍生 出 二 代 子 体 ， 以 此 类 推 。 通 过 这 样 的 方式 ， 在 LOGO 


创意 的 初期 ， 得 到 了 很 多 靠 谱 可 行 的 方案 。“ 衍 生 ” 是 一 个 既 痛 藻 义 让 人 兴奋 的 过 程 ， 可 以 之 无 顾忌 地 去 创 想 很 多 图 形 ， 得 到 很 


多 万 案 ，, 但 是 思考 的 过 程 却 是 漫长 而 痛 藻 的 ， 如 图 3-22 ~ 图 3-24 所 示 。 


子 体 变化 微妙 


РЕЧЕ, БИ 


93-22 ”衍生 计 的 原理 示意 


经 过 一 蔓 艰 王 的 努力 ， 在 所 有 的 创意 方案 中 ， 我 们 通过 内 部 讨论 以 及 用 户 投 票 的 方式 ， 选 择 了 这 个 测试 版 的 方案 ， 它 轻 盒 、 
ЕЕ. (Е, Лк ( 见 图 3-25) 。 在 测试 版 本 体验 过 程 中 我 们 束 友 现 了 一 些 问题 ， 图 标 与 Win7 默 认 的 壁纸 区 别 不 明显 、 形 
人 态 不 够 饱满 、 比 其 他 应 用 图 标 要 弱小 等 ， 这 些 问题 不 容 小 虎 。 


目标 导 同 行为 是 一 个 选择 、 寻 找 和 实现 目标 的 过 程 ， 它 能 提高 人 的 动机 水 平 ， 不 断 地 提出 富有 挑战 性 的 要 求 ， 并 引导 去 完成 
一 个 又 一 个 更 高 的 目标 ， 再 获得 最 终 成 果 。 在 对 品质 要 求 极 高 的 情况 下 ， 目 标 导 向 可 以 达到 良好 的 效果 。 
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等 下 去 看 下 深圳 凌晨 4 点 的 样子 


93-23 ”创意 LOGO 过 程 
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图 3-24 用 “衍生 计 € 设计 了 52 个 创意 LOGO 


桌面 图 标 相 对 弱小 任务 栏 不 够 明显 
图 3-25 ”我 们 选择 了 一 个 方案 ， 但 是 不 够 完美 


1. 目 标 阶 段 一 : 迅雷 7 传承 思维 再 优化 ， 新 万 案 反 复 打 磨 再 升级 


迅雷 7 作为 产品 的 重要 里 程 碑 ， 蜂 鸟 的 LOGO 形 象 功 不 可 没 ， 滨 试 老 万 案 的 优化 并 非 一 种 倒退 ， 是 传承 的 思路 ， 新 方案 是 我 
们 在 蜂鸟 的 基础 上 衍生 出 的 新 方向 ， 虽然 存在 不 足 ， 但 是 我 们 仍 希望 在 这 个 方案 上 有 更 多 突破 ， 如 图 3-26 所 示 。 


2. 目 标 阶段 二 : 以 品牌 图 形 化 为 目标 ， 握 茎 多 余 的 信息 干扰 


放 在 使 用 场景 中 ( 见 图 3-27) ， 我 们 最 终 选 择 了 最 图 形 化 的 方案 ， 这 也 是 众多 品牌 演化 的 一 个 必 经 之 路 。 最 简洁 的 形体 传 


递 最 直接 的 信息 。 


迅雷 /再 优化 


新 方案 再 升级 


图 3-26 ”分 为 两 个 方向 再 次 进行 设计 


图 3-27 放 入 场景 中 进行 方案 箭 选 


3. 目 标 阶段 三 : 先 小 后 大 ， 反 向 推导 最 终 的 图 标 样 式 


为 了 让 图 标 在 任何 状态 下 都 清晰 可 见 ， 这 次 我 们 优先 考虑 最 小 的 极端 情况 ( 见 图 3-28) ， 再 反 回 推导 出 我 们 的 最 终 方 案 ， 
这 样 既 能 保证 统一 性 ， 又 能 照顾 每 一 种 特殊 情况 。 


图 3-28 ”选择 小 图 标 展示 效果 好 的 方案 


4. 目 标 阶段 四 : 增加 细节 去 简单 化 ， 简 约 、 精 致 、 易 用 的 最 终 形 态 


/LN 


局 平 化 的 设计 语言 容易 让 人 产生 简单 的 错觉 ， 尤 其 在 图 形 化 设计 严重 的 情况 ， 作 为 
一 些 细节 ( 见 图 3-29) ， 有 了 细节 的 点 缀 ， 更 加 值得 推 融 ( 见 图 3-30) 。 


个 LOGO 是 不 合适 的 ， 为 此 我 们 增加 了 


光源 方向 


ПЧ ЧЛ 
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图 3-29 ”对 方案 进行 整体 细 市 描绘 


图 3-30” 放 在 应 用 场景 中 再 次 求证 


333 “沟通 多 端 品牌 的 “阴阳 计 / 


“阴阳 ”原本 表达 的 含义 融 是 两 种 物体 相辅相成 ， 聚 合 一 体 ， 这 与 我 们 的 产品 理念 是 一 致 的， 我 们 斋 


望 多 闯 产 品 之 间 是 有 品 


牌 沟通 的 ， 区 别 于 电脑 客户 端的 设计 思路 ， 移 动 端 更 注重 色彩 的 记忆 ， 因 此 有 了 蓝 色 背景 


背景 的 手机 迅雷 的 图 标 ， 如 图 3-31 所 示 。 


图 3-31 


移动 端 与 PC 端的 阴阳 设计 


用 心 的 设计 市 来 展 好 的 回报 ， 整 体 的 改版 过 程 历时 三 个 月 〈 见 图 3-32) ， 改 版 之 后 ， 迅 雷 9 的 桌面 图 标 使 用 效率 明显 比 迅 雷 


7.9 和 极速 版 要 高 ， 如 图 3-33 所 示 。 


衍生 计 
设计 师 创意 32 套 方案 


\Ү v Y %Ç 
< ` ч 轻盈 、 向 上 、 优 美 
2? [3 v K 决定 了 测试 版 方案 
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图 3-32 
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目标 导向 计 
高 品质 的 优化 方法 


< < < 
€ < € 


迅雷 9 改版 设计 时 间 轴 


阴阳 计 
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图 3-33 ”新 版 迅雷 9 图 标 设计 数据 反馈 


34 一 只 蜂鸟 的 拟人 化 : 思考 与 创造 


3.4.1 品牌 情感 化 设计 的 思考 


一 件 产品 的 成 功 与 否 ， 设 计 的 情感 要 素 也 许 比 实用 要 素 更 为 关键 。 


б 
(«09 


一 一 唐纳德 诺 


曾 有 实验 表明 ， 当 人 们 处 于 焦虑 状态 时 ， 思 考 的 范围 会 变 窄 。 人 们 会 进入 一 种 盲目 的 循环 状态 ,进行 无 意识 的 反复 思考 。 此 
时 ， 如 果 有 美观 而 友好 的 图 像 引 导 ， 可 以 使 人 们 更 快 地 走出 死胡同 ， 并 和 解决 问题 ， 如 图 3-34 所 示 。 


Е" 


页 面 加 载 出 现 错误 < 


请 点 击 左上 角 返 回 键 
i нь) 
点 击 返 回 获取 更 多 内 容 
图 3-34 图像 引 叶 可 以 更 快 解决 问题 
情感 化 设计 能 有 效 地 建立 起 产品 与 用 户 之 间 的 情感 联系 ， 通 过 情感 的 共鸣 点 引导 用 户 进 行 有 效 的 问题 定位 与 思考 。 


1. 品 牌 需要 建立 情感 联系 


品牌 不 仅 是 产品 的 识别 标志 ， 更 代表 了 用 尸 对 一 个 产品 的 全 部 感官 符号 。 而 品牌 引起 的 情感 反应 束 是 这 个 品牌 的 长 期 价值 。 
那么 ， 如 果 要 建立 品牌 的 长 期 价值 ， 束 要 建立 品牌 与 用 户 之 间 的 情感 联系 。 


2. 拟 人 化 可 以 建立 信任 感 


只 有 和 角色 变 得 人 性 化 ， 才 能 让 人 觉得 可 信 。 除 非 人 们 能 从 这 些 角 色 身 上 看 到 自己 的 影子 ， 否 则 它 的 行为 就 会 让 人 感到 不 真 


华 尔 特 . 迪士尼 


如 果 想 与 用 户 建 立 起 情感 联系 ， 首 先 需 要 先 与 用 户 建 立 起 信任 。 说 到 信任 感 ， 我 们 不 得 不 说 风 历 亚洲 的 即时 通讯 类 App 
LINE， 这 蒜 APP 的 成 功 离 不 开 LINE FRIENDS 形 铺 本 身 的 成 功 ， 如 图 3-35 所 示 。 


LINE FRIENDS 的 人 物 设 定 贴近 生活 ， 角 色 之 间 的 互动 也 是 生活 里 常见 的 桥 段 ， 让 人 看 完 后 会 心 一 笑 ， 从 而 产生 亲近 感 ， 久 
而 久之 建立 起 充分 的 信任 感 。 


图 3-35 LINE App 和 LINE 的 卡通 形象 


342 ”从 草图 到 成 稿 
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一 一 首 桑 . 尼古拉斯 
1. 信 息 的 拆 分 与 重组 


通 单 ， 我 们 能 在 二 看 眼睛 的 情况 下 轻松 地 画 出 一 个 圆 形 或 三 角形 ， 但 当 我 们 遇 到 不 熟悉 的 目标 对 象 ， 并 且 要 把 他 画 / 设 计 出 
来 时 ， 往 往 会 无 从 下 手 。 造 成 这 种 困境 的 原因 有 两 个 : 第 一 ， 后 者 的 信息 量 远 远大 于 前 者 ， 短 时 间 内 无 法 进行 快速 地 处 理 ; 第 
二 ， 后 者 的 信息 超出 了 我 们 常规 的 记忆 范围 ， 需 要 伦 时 间 重 新 进行 认 知 。 


因此 ， 在 画 草 图 之 前 ,我 们 做 了 一 系列 信息 的 拆 分 与 重组 的 工作 ， 需 要 重新 分 析 并 拆 解 出 蜂鸟 (И 3-36) 身上 的 所 有 特 
征 和 符号 性 的 元 素 。 


图 3-30 我 们 研究 蜂 乌 的 形体 ， 提炼 一 些 蜂 乌 的 符号 


行 分 析 ， 归 纳 出 几 个 绘画 记忆 点 的 切入 口 : 第 一 ， 蜂 鸟 具备 高 辨识 度 的 面 纹 ; 第 二 ,不 


通过 对 蜂鸟 科 的 两 个 常见 亚 科 种 类 进 
其 中 ， 面 纹 尤 为 天 键 ， 蜂 鸟 的 面 纹 信息 相对 复杂 ， 我 们 需要 针对 这 个 部 分 进行 绘画 语言 的 


一 定 会 有 肚 日 ; =, іа, 
提炼 。 


2. 面 纹 的 推导 


蜂 乌 的 面部 拥有 虹 彩 羽毛 和 吃 斑 ( 见 图 3-37) 。 经 过 绘画 语言 的 简化 ， 用 轮廓 线 划 分 出 面部 的 核心 区 域 和 辅助 区 域 。 


图 3-37 Жааз 


提取 到 符号 化 的 元 素 后 ， 开 始 进 行 对 面 弘 的 组 合 。 围 绕 基 础 元 素 设 计 了 几 组 不 同 的 面 纹 与 五 官 的 组 合 ， 同 时 在 公司 内 部 进行 
了 一 次 有 针对 性 的 小 规模 调研 ， 如 图 3-38 所 示 。 


93-38 ”进行 实验 采样 ， 收 集 整 理 意 见 


针对 不 同 的 问题 采取 不 同 的 调研 方式 ( 见 图 3-39) 。 比 如 在 进行 面 约 和 玖 冠 的 方案 评审 时 ， 我 们 蜂 选 了 50 位 参与 者 来 进行 
调研 ， 他 们 分 别 来 目 不 同 的 部 门 和 项 目 组 。 我 们 根据 “是 否 有 消费 过 卡通 类 型 周边 产品 以 及 喜爱 程度 ”来 进行 分 组 。 


其 中 一 组 定义 为 “喜欢 ”， 而 另 一 组 则 为 “一 般 / 无 感 完 ”， 如 图 3-40 所 示 ， 然 后 分 别 看 两 组 参与 情况 的 数据 比 对 ， 从 共性 
与 对 立 性 中 提取 有 帮助 的 信息 来 辅助 我 们 站 在 更 客观 的 角 大 去 了 解 用 户 对 细节 的 感受 。 
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图 3-39 面 纹 与 羽 冠 的 结合 方案 筛选 


组 1: їй 组 2: — #5 / JG SX т 


No.] 


No.2 


No.2 


No.3 No.3 
No.4 21% No.4 14% 
No.5 [0% No.5 [0% 

No.6 8% No.6 Г 90 
No.7 No.7 14% 
No.8 8% No.8 [0% 


图 3-40 ”调研 投票 数据 结 


当 统 计 结 果 出 来 的 时 候 ， 最 令 人 惊喜 的 是 两 组 参与 者 投票 数 最 高 的 都 是 二 号 组 合 方案 。 而 起 初 我 们 预期 的 情况 是 两 组 也 许 会 
各 持 己 见 。 在 调研 过 程 中 ， 我 们 记录 了 每 一 位 参与 者 的 感官 信息 ， 由 此 我 们 沉 泥 出 了 一 系列 关键 词 的 情感 倾向 。 比 如 弧度 、 圆 
形 、 拟 人 、 大 头等 都 是 友好 泡 畴 类 的 符号 ， 而 硬 、 直 和 角 、 锐 利 、 复 杂 等 关键 词 都 是 让 人 嘻 得 不 那么 友好 甚至 有 距离 感 的 符号 。 同 
时 还 存在 一 些 中 性 关键 碍 ， 比 如 “ 脸 小 ”在 某 一 部 分 人 群 看 来 是 代表 “ 藤 ”， 而 另 一 部 分 人 会 完 得 “拘束 ”甚至 有 上 后 “小 气 ”。 


所 以 ， 在 这 些 得 号 化 的 信息 组 合 过 程 中 我 们 会 细心 地 收集 并 整理 每 一 位 参与 者 的 意义， 这 些 宝贵 的 信息 能 让 我 们 更 了 解 如 何 


去 创造 这 个 形象 ， 并 能 让 更 多 人 喜欢 。 


3. 拟 人 化 


正如 华 尔 特 : 迪 士 尼 所 说 过 的 ， 除 非 让 观众 能 在 卡通 角色 上 看 到 目 己 身上 的 影子 ， 人 否则 这 一 切 都 会 显得 不 真实 ， 从 而 无 法 获 


得 观众 的 青睐 。 


没 蚀 ,我们 这 次 设计 的 核心 目标 整 是 拟人 化 。 当 我 们 要 将 一 个 对 象 进行 拟人 化 的 时 候 ， 首 先 要 尝试 还 原 出 其 原始 的 状态 ， 这 
样 才 能 便于 我 们 站 在 更 客观 的 视角 去 寻找 拟人 化 的 设计 机 会 点 〈 见 图 3-41) 。 


图 3-41 初期 的 还 原 党 试 手稿 


在 尝试 了 多 个 不 同 的 “ 鸟 ”形态 后 ,我 们 一 致 认为 “四 肢 ” 是 拟人 化 的 关键 因素 ,一 旦 不 那么 像 妇 膀 和 爪子 后 ， 感 党 会 完 
不 一 样 ， 如 图 3-42 所 示 。 


图 3-42 ”拟人 化 的 造型 


时 然 找 到 了 设计 机 会 点 ， 但 如 何 创 造 出 能 让 人 满意 的 四 胶 成 为 新 问题 ， 在 这 个 问题 上 我 们 人 花费 了 很 多 时 间 ， 似 乎 总 是 给 不 出 
令 人 满意 的 答案 。 每 当 我 们 遇 到 一 些 比较 环 手 的 情况 时 ， 会 更 倾向 于 站 在 一 个 更 宽广 的 视角 看 待 所 遇 到 的 问题 。 所 以 ， 我 们 又 组 
织 了 一 次 推导 测验 。 


4. 四 肢 的 进一步 推导 


仅仅 只 是 设计 团队 对 “四 及 ”的 认可 也 许 还 稍 显 请 面 ， 但 如 果 更 多 人 在 卡通 形象 上 找到 了 共鸣 点 并 一 致 认可 ， 这 样 才 会 更 具 
备 况 服 力 。 


我 们 找 了 8 个 参与 者 ， 其 中 部 分 人 具备 手绘 能 力 而 其 他 人 并 不 是 特别 擅长 手绘 表达 。 我 们 事先 男 好 几 组 不 同 的 动态 四 胶 场 
景 ， 并 有 意 将 四 胶 部 分 留 捍 供 大 家 绘画 补充 。 看 看 在 大 家 心目 中 ， 什 么 样 的 四 及 才 更 贴近 他 们 预期 的 样子 ， 找 到 与 用 尸 之 间 的 共 
唱 点 。 其 中 ， 能 通过 绘画 完成 表达 的 残 用 绘画 的 形式 ， 而 无 法 马上 给 予 反 馈 的 融 企 有 限 的 时 间 内 进行 思考 。 当 最 终 大 家 看 到 各 和 目 
的 作品 时 也 许 束 能 清楚 上 自己 的 偏好 ， 这 样 同样 能 达到 测试 目的 并 且 效 果 会 更 好 ， 同 时 也 能 更 接近 最 终 的 目的 。 推 导 过 程 如 图 3- 
43 所 示 。 
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图 3-43 ”推导 过 程 


5. 友 推 与 测试 


在 我 们 完成 了 形象 的 基础 设计 后 ， 我 们 便 开 始 了 上 反 推 测试 。 目 的 是 为 了 检验 形象 的 五 言 和 四 胶 是 否 已 经 达到 了 拟人 化 的 标 
准 。 


首先 是 针对 五 官 的 测试 一 一 表情 的 延展 性 。 我 们 创作 初期 给 卡通 形象 拟定 了 几 个 性 格 关键 词 : aS. Ой, п], ШУ, 
幽默 。 接 下 来 ， 我 们 开始 着 手绘 制 不 同 的 表情 ， 检 验 五 官 的 情感 丰富 度 ， 如 图 3-44 所 示 。 


在 完成 了 表情 的 测验 后 ， 崇 接着 是 对 四 肝 的 测试 ( 见 图 3-45) 。 这 也 是 最 为 天 键 的 部 分 ， 我 们 都 一 致 认为 LINE FRIENDS 的 
拟人 度 是 近年 来 比较 符合 大 众 喜 好 的 ， 于 是 我 们 精心 挑选 了 几 个 具备 高 舒 展 性 的 动态 来 进行 检验 。 


93-44 ”基础 表情 


图 3-45 ”对 四 肢 拟 人 化 的 检验 


最 终 的 结果 令 人 满 晶 ， 这 也 让 我 们 这 几 个 月 的 努力 得 到 了 认可 。 过 程 中 我 们 也 曾 遇 到 过 不 少 质疑 和 瓶 肛 ， 在 每 一 次 遇 到 疑问 
的 时 候 ， 我 们 都 坚持 以 最 客观 的 万 式 来 进行 检验 ， 和 寻找 并 解决 问题 。 具 象 化 的 内 容 并 不 存在 “好 ”与 “ 坏 ” 之 分 ， 因 为 每 个 人 针 
对 同一 个 对 象 的 感官 竺 号 都 不 尽 相 同 ， 这 不 仅 是 美学 上 的 问题 ， 还 有 文化 理解 上 的 帮 异 。 正 如 罗兰 :巴特 在 《 明 室 》 一 书 中 曾 提 
到 过 的 所 指 和 能 指 的 意义 ， 而 我 们 能 做 到 的 束 是 在 主观 的 创作 上 尽 可 能 地 融入 更 多 客观 上 的 共鸣 ， 但 我 们 不 能 因为 客观 的 因素 而 
动 挥 我 们 的 主观 感受 和 创作 。 


我 们 收获 了 更 多 的 方法 论 和 实践 经 验 ， 我 们 知道 遇 到 不 同 问题 时 该 做 出 什么 样 的 调整 与 应 对 。 这 也 许 是 思考 与 创造 过 程 中 最 
具有 魅力 的 地 方 吧 。 


3.5 人 切 见 ， 为 你 曾 下 一 迅雷 招聘 官网 创 晶 设计 


招聘 官网 是 公司 企业 文化 、 品 牌 形 稼 的 一 道 窗口 。 它 是 一 座 桥梁 ， 很 多 精英 展 才 是 通过 招聘 官网 奶 遇 迅雷 ， 留 在 迅雷 。 招 聘 
官网 传达 的 不 仪 是 对 人 才 的 技能 要 求 和 公司 的 福利 待遇 ， 还 有 企业 文化 、 公 司 品 牌 与 形象 。 无 论 是 社 招 还 是 每 年 的 校 招 ， 设 计 师 
们 对 每 期 招聘 官网 都 精心 策划 与 设计 。 


同样 是 招聘 ， 但 是 面向 的 人 群 、 对 象 不 一 样 ， 招 聘 官网 呈现 的 内 容 和 形式 也 不 一 样 。 社 招 官网 面向 的 人 群 比较 广 ， 我 们 主要 
从 公司 整体 的 重要 产品 策划 、 开 放 富 有 人 性 的 环境 和 重视 人 才 的 价值 理念 出 友 设 计 。 校 招 官网 面向 的 是 应 届 毕 业 生 ， 青 春 洋 洪 、 
充满 朝气 是 毕业 生 的 特点 ， 所 以 校 招 官网 的 设计 主题 是 “ 玩 的 酷 靠得住 ”， 表 明 我 们 对 人 才 需 求 的 特质 是 玩 起 来 活路 、 酷 燃 、 勇 
于 接受 新 鲜 事 物 ， 工 作 起 来 义 认 真 、 沉 稳 的 年 径 人 。 下 面 将 通过 拉 述 社 招 官网 和 校 招 官网 的 不 同 设计 理念 和 创意 策划 方案 ， 展 现 


当面 向 不 同 的 对 象 时 ， 招 聘 官 网 如 何 传达 相同 的 企业 文化 和 公司 品牌 形象 。 


3.51 ”社会 招聘 官网 入 


1 设计 背景 
2014 年 ， 迅 雷 上 市 ， 标 志 迅雷 踏 入 一 个 全 新 的 里 程 碑 。 
2015 年 ， 水 晶 项 目 风 生 水 起 ，“ 星 域 ”重新 定义 CDN。 
2016 年 ， 迅 雷 9 隆重 发 布 ， 优 化 了 下 载 、 搜 索 嗅 探 等 核心 功能 ， 得 到 了 广大 用 户 好 评 。 


公司 壮大 、 业 务 发 展 的 同时 ， 需 要 招贤 纳 才 ( 见 图 3-46) ， 吸 引 更 多 有 梦想 的 青年 加 入 迅雷 共 创 更 美好 未 来 ! 


2014 年 水 晶 “ 星 域 ” 迅雷 9 
迅雷 上 市 重新 定义 CDN 全 面 发 布 


图 3-46 ”社会 招聘 电网 的 设计 背景 
2. 设 计 理 念 


招聘 官网 在 传达 公司 正直 、 开 放 、 创 新 、 担 当 、 共 赢 的 价值 观 的 同时 ， 又 能 结合 公司 核心 产品 和 特色 ， 让 期 等 加 入 迅雷 的 有 
绿 人 对 迅雷 的 产品 有 认 允 ， 另 一 方面 也 是 对 公司 产品 的 宣传 ， 设 计 师 和 招聘 小 组 共同 确定 了 新 招聘 官网 的 设计 方向 : 让 迅雷 的 核 
心 产品 (迅雷 的 “ 噢 探 ” 与 水 晶 的 “ 星 域 ”) 相 融 合并 传达 企业 文化 。 


通过 公司 内 部 征集 主题 文案 ， 傍 选 后 确定 了 招聘 官网 的 设计 主题 : Пе, 8 АНЕ, 
‚ 嗅 探 星 域 一 一 通过 交互 、 视 觉 、 动 效 设 计 来 传达 与 定 焦 ; 
. 遇见 迅雷 一 一 通过 打动 人 心 的 文案 来 定 焦 。 


星 域 是 一 片 “ 景 ”， 星 罗 棋 布 ， 不 分 办 域 。 设 计 呈 现 一 片 神 秘 洗 瀚 、 包 罗 万 象 之 景 ， 并 加 上 “ 嗣 探 ” 动 效 生动 地 表达 主题 
之 “探索 星 域 ”。 


遇见 迅雷 是 一 种 “ 情 ”， 审 有 一 种 浓 浓 的 绿 分 ! “遇见 迅雷 ”文字 直接 呈现 于 迅雷 LOGO 之 上 ， 情 景 结合 ， 恰 到 好 处 。 


"外景 ”与 “内 情 ” 的 结合 ， 再 加 上 “说 理 ” (“ 理 ” 即 加 入 迅雷 的 理由 ) ， 是 招聘 官网 的 整体 设计 理念 和 思路 ， 如 图 3- 
47 所 不 。 


[B EE Ez Ep; 遇见 迅雷 加 入 迅雷 
web-max 布 局 及 构图 动 效 SEK EL XX 网 页 内 容 传 达 


图 3-47 ”社会 招聘 电网 的 设计 理念 


3. 设 计 方 案 
(1) 外 景 一 一 “了 嗅 探 星 域 ” 
设计 关键 字 


是 具体 的 。 浩 瀚 星 域 为 主体 之 景 ， 要 给 人 辽阔 无 边 、 和 神秘 、 包 罗 万 象 之 感 ， 充 满 无 限 的 遐想 和 能 量 。 


整体 设计 的 布局 、 素 材 选择 、 配 色 方 案 、 图 形 和 动态 效果 ， 都 围绕 这 几 个 天 键 子 延伸 : 星 域 、 梦 想 、 链 接 、 未 来 ， 如 图 3- 


= 
57; 


4877, 


图 3-48 ”社会 招聘 官网 的 关键 字 


WEB-MAX 


整体 布局 
IMAX 是 目前 最 先进 的 电影 播放 技术 ， 超 大 尺 才 的 屏幕 让 电影 特效 展现 得 淋漓 尽 致 ， 给 人 超 强 的 视 台 冲击 力 ， 如 图 3-49 所 


Хә 


Pe FE DS oy 弱 焦 区 域 


清晰 明显 ， 第 一 腿 被 看 到 的 内 容 时 托 主体 


IMAX 电 影 


图 3-49 IMAX 电 影 成 像 特色 


打破 传统 的 页 面 布 局 框 娘 ， 我 们 在 招聘 官网 的 整理 布局 上 ， 延 用 迅雷 官网 采用 的 WEB-MAX 布 局 方式 ， 使 整个 页 面 的 星空 给 
人 浩瀚 无 际 、 不 分 肾 域 的 视 完 ;中 击 力 ， 且 更 有 层次 感 ， 如 图 3-50 所 示 。 


传统 网 页 布局 WEB-MAX 布 局 
内 容 全 部 集中 在 页 面 中 央 页 面 中 央 内 容 突出 
缺乏 主 次 视觉 感 整个 页 面 有 层次 感 


图 3-50 “借助 IMAX 电 影 成 像 特 色 规 划 官 网 布局 


确定 WEB-MAX 和 布局， 围绕 “ 星 域 ”和 “梦想 ”， 我 们 找 了 很 多 素材 ， 要 有 浩瀚 、 力 量 的 感 沈 ， 预 示 着 未 来 潜能 无 可 限量 ， 
如 图 3-51 所 示 。 我 们 延伸 到 宇宙 星空 ， 一 个 无 限 大 的 舞台 。 


最 后 定 焦 一 个 角度 : 光 从 地 球 的 育 后 照 出 ， 缓 缓 升 起 ， 编 藏 巨大 的 能 量 ， 如 图 3-22 和 图 3-23 所 示 。 


副 色 调 | 
神秘 紫 + 绚 丽 黄 Ш 


在 
绚丽 的 黄色 ， 代 表 着 我 们 的 团队 拥有 着 攻 勃 的 热情 ! 


图 3-53 ”社会 招聘 官网 的 色调 


主题 字 以 脉冲 的 形式 进入 ， 同 时 ， 线 鸟 则 以 逐步 描 线 的 方式 呈现 ， 相 比 于 传统 的 淡 入 效果 ， 逐 步 描 线 让 动画 显得 更 多 变 ， 且 
线 乌 和 主题 字 完 成 动画 的 时 间 保 持 一 致 ， 使 得 两 个 动画 能 更 好 地 融合 在 一 起 ， 如 图 3-54 所 示 。 


图 3-54 ” 毅 页 的 标题 动 效 
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嗅 探 的 四 周 加 入 了 一 个 “呼吸 ”的 效果 ， 代 表 着 正在 探寻 的 意思 ，1 秒 后 一 个 弹 起 的 动作 ， 代 表 嗅 探 结 束 ， 然 后 四 类 职位 出 


现 ， 加 入 这 样 一 个 动画 ， 目 的 是 让 用 户 的 视角 集中 到 该 区 域 ， 让 用 户 第 一 时 间 找 到 相关 的 职位 信息 。 


四 类 职位 的 外 圈 在 划 态 下 做 目 转 处 理 ， 目 的 是 吸引 用 户 进行 点 击 ， 鼠 标 悬 浮 时 ， 目 转 停止 ， 同 时 中 间 小 图 标 加 了 一 个 弹跳 的 


动 效 ， ЛЕЕ л 浮 态 的 对 比 ， 如 图 3- БЫТ 


图 3-55 ”职位 按钮 的 动 效 设计 


的 星星 闪 动 、 流 星 滑 深 ( 见 图 3-56) 是 用 Canvas 来 实现 的 。 因 为 Canvas 擅 长 处 理 含有 大 量 元 素 的 动画 ， 其 绘制 的 图 像 
通过 JavaScript 动 态 控制 星星 和 流星 的 数量 、 大 小 、 位 置 等 信息 ， 以 及 闪 炸 效果 ， 最 终 通 过 Canvas 在 页 面 呈 
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不 占 DOM， 所 以 ， 
现 这 尝 元 素 ， 使 得 页 面 更 有 星空 的 灵动 感 。 


图 3-56 ”背景 流星 、 星 星 闪 动 动 效 


围绕 “连接 ”和 “未 来 ”， 我 们 整体 设计 了 一 个 虚拟 的 星座 连 线 图 ，Slogan 的 设计 也 沿用 了 链接 的 感觉 ， 背 后 加 了 星座 线 
镜 的 雷 乌 ， 每 个 星星 都 代表 看 我 们 迅雷 人 的 一 种 精神 ， 一 种 坚韧 不 拔 的 意志 力 ， 也 高 意 者 复 冥 中 注定 的 你 、 我 、 他 正在 建立 着 连 
网 站 找到 连接 入 口 ， 期 待 更 多 的 新 鲜血 液 加 入 ， 如 图 3-57 所 示 。 


志 ， 通 过 招聘 


图 3-57 ”招聘 官网 首页 最 终 上 线 效果 


为 了 让 用 户 都 能 在 第 一 屏 看 到 职位 的 天 键 信息 ， 网 页 的 首 屏 做 了 目 适 应 处 理 ， 即 不 管用 尸 屏幕 大 小 (在 合理 学 围 内 ) 
的 第 一 屏 总 能 完整 呈现 给 用 户 ， 这 种 处 理 其 实 也 是 一 种 兼容 ， 是 对 屏幕 分 辨 率 的 兼容 。 


(2) 内 情 一 “遇见 迅雷 ' 


ЕН 


情 ， 是 抽象 的 。 借 助 嗅 探 星 域 之 景 ， 抒 发 遇见 迅雷 之 情 。 


浩瀚 星 域 ， 让 人 联想 到 梦想 和 未 来 ， 加 上 打动 人 心 的 文案 ， 空 灵 目 激发 热情 的 背 


背景 音乐 ， 达 到 情景 交融 。 


1) 主 标题 


遇见 迅 
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“遇见 迅雷 ”市 有 缘分 /情感 化 色彩 的 主 标题 。 


2) 打动 人 心 的 语言 : 
‚ 用 行动 关心 你 的 成 长 。 
我 们 愿意 与 最 优秀 的 工程 师 一 起 平等 沟通 、 自 我 管理 、 共 同 成 长 。 


Sean (迅雷 创始 人 /董事 长 羔 CEO) 


用 价值 创造 人 类 未 来 。 


勇于 探索 互联 网 精神 ， 创 新 与 共享 云 计算 未 来 。 


Lei chen (迅雷 联席 CEO/ 网 心 科 技 公 司 CEO) 


“ 用 一 种 精神 追求 梦想 。 


我 们 一 直 在 追求 一 种 偏执 精神 、 追 求 极 客 。 


Steve (迅雷 联合 创始 人 ) 
音乐 & 音 效 

招聘 官网 以 空灵 、 激 发 正 能 量 的 音乐 《Moonlight》 为 背景 ， 仿 佛 漫步 宇宙 星空 ， 却 又 让 人 满怀 希望 。 

抒发 浩瀚 宇宙 星 域 ， 我 们 在 此 相遇 ， 不 管 你 有 什么 样 的 梦想 ， 请 不 要 放弃 它 ! 

再 加 上 盐 乌 出 现 音 效 的 灵动 感 、 噢 探 职 位 音效 的 科技 感 等 ， 音 效 的 细节 处 理 ， 使 整个 网 页 更 有 情感 和 生命 力 。 

(3) 讽 理 一 一 “加 入 迅雷 ” 

理 ， 是 形 而 上 的 。 唯 愿 饱 合 灵性 与 情感 的 设计 工作 ， 也 能 内 潍 理 性 之 光 ， 绽 放 从 容 之 美 。 

首页 下 方 三 个 模块 分 别 是 加 入 迅雷 的 三 大 理由 ， 三 个 层次 符合 马 斯 洛 需求 层次 理论 ， 如 图 3-58 所 示 。 

“ 工程 师 文化 一 一 人 生 价 值 的 实现 。 

" 人 性 化 环境 一 一 安 人 全、 社交、 尊重 需求 。 


“ 薪资 待遇 一 一 物质 生存 需求 。 
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(4) 其 他 一 一 易 用 性 设计 
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3-58 ”加 入 迅雷 公司 的 理由 


投递 简历 的 易 用 性 设计 ， 是 招聘 官网 非 音 重 要 的 一 部 分 


抛弃 了 原来 招 上 
可 顺利 投递 简历 ， 如 图 3-59 所 示 。 
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新 官网 省 去 投递 注册 登录 的 麻烦 


须 注册 登录 ， 只 要 选择 相应 岗位 ， 即 


此 外 ， 在 一 些 细节 的 处 理 上 ， 即 使 当 你 拉 到 首页 的 最 下 方 ， 加 入 迅雷 的 按钮 内 炼 ， 依 然 明 显 突 出 ， 热 情 洋 漳 的 召唤 一 一 快 
来 加 入 我 们 ! 图 3-60 所 示 为 带动 效 的 控 钮 。 


图 3-60” 帝 有 动 效 的 加 入 按钮 


从 确定 招聘 官网 的 设计 理念 、 设 计 主 题 ， 表 到 页 面 布局 、 素 材 选取 、 构 图 动 效 和 音乐 音效 等 ， 情 景 结合 加 上 说理 的 整体 设计 
思路 ， 每 个 细 万 ， 我 们 都 认真 推 喜 和 打磨 ， 付 出 了 感情 和 心血 ， 作 品 便 有 了 灵魂 。 


如 果 说 社会 招聘 官网 深 茂 着 公司 的 底 强 和 价值 文化 ， 那 么 校园 招聘 官网 则 是 划 勃 朝气 ， 又 富有 创新 力 的 展现 。 


社会 招聘 的 案例 我 们 更 注重 系统 的 设计 思路 ， 现 在 我 们 从 宏观 过 渡 到 微观 ， 以 校园 招聘 为 例 ， 换 一 种 思路 来 阐述 品牌 设计 ， 
希望 不 同 的 设计 思路 可 以 市 给 大 家 不 一 样 的 启 友 。 


3.5.2 МЕЕ 


1. 品 牌 定位 


每 年 为 了 选拔 新 的 毕业 生 ， 都 会 策划 一 个 全 新 创意 的 迅雷 校园 招聘 (以 下 简称 校 招 ) 活动 ， 会 分 为 三 期 : 前 期 预告 、 宣 传 海 
报 、 正 式 局 动 。 重 点 是 正式 局 动 的 PC 端 和 移动 端 校 招 网 站 的 设计 ， 以 及 各 种 线 上 线 下 的 准备 活动 。 校 招 网 站 承载 的 功能 包括 : 
投递 简 历 、 招 聘 职位 、 招 聘 动态 、 走 进 迅 雷 等 ， 同 时 是 一 种 宣传 企业 品牌 的 恨 好 渠道 ， 所 以 每 年 的 设计 团队 都 会 深度 参与 到 整个 
创意 策划 和 执行 中 ， 其 中 比较 刺激 的 是 : 一 个 想法 到 底 如 何 与 视 况 形式 结合 并 形成 更 为 强大 的 昼 秘 力量 。 这 次 的 校 招 创意 方案 上 
线 后 广 受 好 评 ， 很 多 好 评 不 仪 来 自 业 内 ， 更 多 来 目 参 加 校 招 面试 的 应 届 毕 业 生 ， 下 面 束 前 述 此 次 校 招 从 创意 到 实现 的 过 程 。 


在 此 之 前 我 们 做 过 很 多 创意 万 案 ， 这 次 我 们 主要 从 内 容 下 手 ， 做 出 能 打动 和 吸引 学 生 的 校 招 活 动 。 而 校 招 本 身 是 一 场 关于 营 
造 气氛 的 活动 ， 既 包含 着 一 个 公司 的 企业 文化 的 宣传 ， 又 充满 对 青春 与 未 来 的 态度 ， 其 中 可 以 玩 的 花样 很 多 。 这 些 年 毕业 的 大 学 
生 一 般 都 是 90 后 ， 他 们 普遍 都 是 独生子 女 ， 有 看 年 轻 、 活 跃 、 勇 于 接受 新 鲜 事 物 的 态 厌 ， 富 有 朝气 ， 勇 于 担当 ， 是 “ 玩 的 酷 靠 
得 住 ”的 一 代 。 针 对 这 部 分 具有 鲜明 特征 的 用 户 群 体 ， 此 次 校 招 的 品牌 定位 融 是 : 打造 高 端的 企业 品质 、 富 有 青春 活力 ， 同 时 彰 
显 充 满 时 尚且 富有 科技 感 的 品牌 形象 。 


2.81535 


与 目标 群体 产生 情感 共鸣 是 场景 被 使 用 的 前 提 。 每 一 届 的 毕业 生 都 会 有 同样 的 危机 感 : 未 来 不 可 预知 ， 同 时 怀疑 自己 的 能 
力 ， 对 优质 企业 充满 期 性 ， 如 图 3-61 所 示 ， 这 融 是 我 们 的 创意 设计 点 。 在 设计 中 与 他 们 的 情感 产生 共 喝 ， 把 危机 感 转化 成 安全 
感 残 是 我 们 接 下 来 要 做 的 事情 。 


设计 机 会 点 


守业 前 12 个 月 3В101018 守业 前 8 个 月 


大 三 刚 结 束 步 入 大 四 阶段 井 入 大 四 毕业 状态 
度 过 假期 心理 开始 逐渐 上 友 生 转变 于 业 设 计 / 论 文 


93-61 应届 毕业 生 心 理 状态 旅程 


我 们 需要 营造 出 让 毕业 生 能 感到 友好 且 乐 观 的 场景 ， 这 样 我 们 的 设计 目标 也 越 来 越 清晰 了 : 让 毕业 生 能 感知 到 迅雷 校 招 的 诚 
总 和 对 竺 青春 态度， 以 及 让 毕业 生 清 楚 地 知道 自己 到 底 需 要 什么 样 的 公司 来 帮助 他 完成 梦想 ， 从 而 建立 起 与 毕业 生 之 间 的 信任 和 
认可 。 


3. 前 期 准备 


前 期 确定 了 今年 校 招 的 主题 文案 : “不 约 而 同 ， 青 春 本 色 不 做 看 客 ”， 由 于 有 四 种 职位 类 型 和 四 大 校 招 城市 ， 所 以 我 们 用 四 
位 学 生来 泻 染 创意 方案 。 故 事 残 是 友 生 在 2017 年 的 校 招 中 : 有 四 个 青春 活力 的 学 生 不 约 而 同 地 来 参加 迅雷 校 招 ， 每 个 人 在 这 里 
遇见 彼此 ， 遇 见 迅雷 ， 蜂 乌 市 领 他 们 走 进 迅雷 ， 了 解 公 司 创立 、 大 事 记 、 工 程 师 文化 、 技 术 和 福利 等 。 伴 随 痢 蜂 乌 的 地 膀 扇 动 与 
飞翔 ， 从 左 至 右 横 屏 滑动 ， 让 毕业 生 更 清晰 快速 地 了 解 我 们 公司 的 企业 文化 ， 解 除 他 们 心中 的 不 确定 性 和 对 未 来 的 不 可 预知 性 。 


在 人 物 形 象 的 设 定 方面 ， 由 4 位 即将 毕业 的 在 校 大 学 生 组 成 ， 分 别 两 男 两 女 ， 应 聘 的 职位 分 别 代表 设 计 、 技 术 、 运 吾 、 产 
品 ， 疫 有 限定 每 个 人 物 对 应 的 职位 ， 通 过 人 物 上 自身 的 性 格 、 表 情 、 造 型 及 动作 表达 活力 与 快乐 、 安 静 与 沉稳 、 健 康 与 运动 、 潮 流 
与 科技 。 服 北 造 型 更 靠近 现在 的 在 校 大 学 生 ， 有 一 种 青春 与 未 来 的 炫 酷 感 。 


下 面 丈 是 基于 前 期 的 思考 和 设计 点 做 的 交互 原型 图 ， 如 图 3-62 所 示 。 
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图 3-62 校园 招聘 交互 原型 
交互 方式 确定 后 ， 那 么 具体 担 摄 要 如 何 进行 呢 ? 什么 样 的 人 物 动作 适合 青春 与 科技 的 主题 ? 
(1) 参考 素材 的 收集 与 分 析 


图 3-63 所 示 是 可 口 可 和 所 早年 做 的 关于 圣诞 节 的 一 个 活动 ， 邀 请 搭档 一 起 共 建 一 个 4 人 小 组 参加 圣诞 Party。 所 以 背景 用 了 四 
个 不 同 的 人 ,但 人 物 风 格 却 有 相似 之 处 ， 随 着 四 个 人 的 不 同 变化 引出 可 口 可 乐 新 ， 同 时 点 亮 页 面 ， 场 面 生 动 又 具有 炫 酷 色 彩 ， 符 
合 可 口 可 乐 品 牌 文化 的 一 贯 作风 。 这 个 案例 对 这 次 的 人 物 拍摄 具有 一 定 的 参考 价值 。 


(2) 人 物 提 摄 


让 静态 页 面 的 呈现 方式 更 灵活 、 更 有 趣 残 要 依靠 前 期 的 视 部 创意 和 后 期 的 动画 重 构 。 视 党 创意 拍摄 选择 4 个 在 校 大 学 生 做 模 
特 ， 请 了 专业 的 人 造型 和 摄影 师 进 行 拍摄 ， 需 要 提前 和 他 们 沟通 服 丢 、 千 型、 灯光 、 模 特 动作 、 情 感 、 表 情 等 细节 要 求 。 期 间 主要 
创意 人 员 (需求 万 和 设计 师 ) 全 程 指 导 ， 在 拍摄 之 前 与 模特 深度 沟通 我 们 的 创意 和 用 途 ， 并 会 提前 备 好 一 些 参 考 动 作 供 模特 模 
仿 ， 以 便 他 们 能 更 好 、 更 快 地 进入 拍摄 状态 。 但 PC 端 更 多 的 是 让 他 们 自由 发 挥 ， 反 而 更 出 彩 ， 而 海报 有 一 定 故事 和 动作 ， 拍 摄 
期 间 会 多 次 反复 沟通 ， 而 且 会 拍摄 一 些 备案 动作 ， 以 免 后 期 设计 的 时 候 出 现 素 材 不 够 用 或 不 能 用 的 问题 。 


图 3-63 可口可乐 圣诞 节 活 动 创 意 


因为 模特 是 在 校 学 生 ， 不 是 专业 的 模特 出 身 ， 所 以 在 拍摄 的 时 候 经 单 会 出 现 表 情 伪 硬 、 动 作 不 到 位 的 情况 ， 我 们 会 很 灵活 的 
给 模特 调整 动作 ， 有 一 部 分 是 临时 想到 的 方案 。 并 不 会 死守 前 期 的 准备 方案 ， 及 时 调整 。 最 终 用 1 天 完成 了 12 套 动作 ， 如 图 3-64 
所 示 。 


93-64 ”人物 摄影 拍摄 棚 拍 效果 


完成 前 期 素材 收集 和 担 摄 ， 接 下 来 残 进 入 了 视 名 设计。 

ЖЖ лж: 代表 四 个 应 聘 不 同 职位 的 学 生 ， 每 个 人 的 动作 、 表 情 、 造 型 都 突出 青春 与 活力 。 
ЖИВ: 用 蓝 色 (迅雷 品牌 色 ) 作 主 色调 ， 黑 色 和 白色 作为 辅 色 调 。 

字体 设计 : 由 短 形 和 斜 线 组 成 。 

风格 质感 : 扁平 与 写实 完美 融合 ， 既 不 失 扁 平 的 高 端 、 清 澈 ， 又 大 胆 融 入 写实 的 情景 感 。 
(1) 字体 设计 


字体 设计 要 与 页 面 背 景 风格 浑然 天 成 ， 所 以 为 了 突出 青春 、 活 力 和 科 拉 感 ， 整 体 由 水 平 、 垂 直 及 旋转 45 度 的 矩形 组 成 ， 并 
在 字体 上 和 周围 加 长 变 成 斜 线条 ， 这 样 更 富有 张力 和 动感 ， 并 将 这 种 设计 元 素 贯 穿 整个 页 面 ， 曼 延 出 一 种 青春 活力 的 节奏 和 美 
感 。 而 且 ， 并 没有 在 字体 的 质感 上 加 丰富 的 质感 ， 背 景 很 饱满 的 时 候 ， 前 置 元 素 以 更 轻 注 的 方式 呈现 会 显得 画面 更 高 档 ， 更 清 
澈 。 


(2) 首页 设计 


如 图 3-65 所 示 ， 首 屏 把 四 个 人 物 融 合 在 同一 场景 中 ， 随 着 主 题 文案 以 百叶 窗 的 形式 出 现 的 同时 ， 四 个 人 物 也 依次 出 现 、 更 
蔡 动 作 ， 两 图 的 背景 都 是 黑 日 画面 ， 蓝 日 线条 再 出 现时 点 亮 整 个 画面 变 成 下 一 张 图 。 在 动 贺 设 定时 ， 每 个 出 场 都 是 严 语 语法 里 
的 “现在 完成 时 (马上 要 完成 ， 但 还 没有 完成 ) ” ， 达 到 时 间 重 亚 、 出 场 紧 次 、 书 奏 协 调 的 状态 。 


首页 和 走 进 迅雷 进行 了 融合 设计 ， 也 是 今年 校 招 的 最 大 党 上 尽 ， 米 用 横 屏 滑动 模式 ， 让 用 尸 轻松 获得 他 们 最 想 知 道 的 信息 ， 整 
个 视 完 效果 罕 崇 围绕 青春 与 科技 的 主题 ， 而 这 两 者 结合 起 来 产生 的 化 学 反应 束 是 动感 与 低 酷 。 横 屏 共 有 6 屏 ， 背 景 设计 深浅 交错 
的 形式 有 利于 用 户 浏 虹 起 来 没 那么 压抑 和 沉 阅 ， 尽 量 降低 视 党 疲 芳 。 整 个 官网 最 具 创 意 亮 忆 的 是 那 只 飞翔 的 蜂鸟 ,蜂鸟 是 迅雷 党 
用 的 品牌 标志 ， 给 局 平 的 图 形 加 上 动画 会 显得 非常 灵动 和 轻 仍 ， 传 承 了 迅雷 本 有 的 轻快 和 加 速 的 品牌 文化 ， 而 且 这 是 第 一 次 妾 试 
这 样 设计 ， 为 了 让 蜂鸟 的 飞行 更 加 流畅 ， 如 图 3-66 所 示 共 画 了 12 张 图 片 。 
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3-65 第 一 屏 四 位 人 物 的 动作 切换 
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(3) 亮 忌 动画 设计 


发 展 历程 的 创意 设计 是 比较 有 细节 的 亮 尽 之 一 ， 重 要 数字 特别 突出 ， 按 照 时 间 轴 由 低 到 高 排序 ， 高 意 公 司 友 展 越 来 越 好 ， 刚 
开始 是 暗色， 得 鼠标 滑动 时 蜂鸟 向 右 飞行 ， 逐 渐 点 亮 文 案 ， 如 图 3-67 所 示 。 
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图 3-67 迅雷 大 事 记 及 迅雷 福利 动 效 示意 


校 招 在 移动 端 友 布 和 推广 主要 及 用 动态 海报 的 形式 。 视 党 设 计时 ， 为 了 突出 “青春 ”和 “ 科 拷 ”的 主题 ， 延 续 了 PC 官网 的 
设计 风格 ,根据 文 案 对 人 物 动 作 的 构想 ， 把 每 个 岗位 的 特性 都 分 别 融 入 海报 中 ， 整 体 呈 现 出 科技 感 和 年 轻 栈 炫 的 效果 ， 如 图 3- 
68 和 图 3-69 所 示 。 


图 3-68 海报 拍摄 过 程 与 设计 效果 


图 3-69 ”海报 拍摄 过 程 与 设计 效果 


移动 六 海报 首先 确定 文案 ， 骨 根据 文案 进行 动作 方案 策划 。 为 四 个 模特 分 别提 摄 了 一 套 连 贯 动作 ， 拍 报 手 法 米 用 的 是 静态 帧 
的 形式 ， 比 如 1 套 连续 动作 拍 了 7 张 照 上 请， 以 便 后 期 用 于 做 动态 GIF 海报 。 


海报 文案 : “出 格 出 挑 出 风采 ”。 


“有 胆 有 料 有 梦想 ”， 只 要 你 心 存 梦 想 ， 敢 于 实践 并 有 胆量 、 有 能 力 把 你 的 创意 转化 成 实 实在 在 的 成 果 ， 就 是 我 们 正在 寻 
找 的 技术 牛人 。 


“不 骄 不 踩 不 浮 夺 ”代表 产品 经 理 ， 手 捧 一 张 白 纸 ， 看 着 它 一 步 步 地 折 生 成 纸 飞机 从 手中 飞 起 划 过 耳 畦 ， 窗 意 是 只 要 脚 路 
实地 的 做 事 ， 总 有 一 天 会 获得 成 就 ， 实 现 自我 价值 。 


“和 敢 拼 敢 闻 敢 再 来 ”， 通 过 撕 掉 纸张 来 体现 ， 寅 意 是 面临 困难 和 挫折 和 勇往直前， 敢于 重新 来 过 的 青春 本 色 。 


校园 招聘 每 年 都 会 改版 ， 有 继承 更 有 创新 。 此 次 针对 “ 玩 的 酷 靠 得 住 ” 且 富有 青春 和 时 尚 的 大 学 生 用 户 群 体 ， 我 们 在 品牌 定 
位 和 创意 策划 上 做 出 了 不 同 程度 的 突破 与 革新 。 从 前 期 品牌 定位 、 创 意 推 导 骨 到 | 方案 藻 地 ， 这 是 一 次 具有 挑战 意义 的 尝试 ， 打 造 
出 一 版 在 架构 、 交 互 和 视 党 上 均 充满 青春 与 科 拉 的 校 招 官 网 。 后 面 通过 线 上 和 线 下 的 传播 和 口碑 反馈 ， 都 获得 了 较为 民 好 的 评 
价 ， 对 我 们 将 来 的 其 他 相关 项 目 具有 一 定 的 参考 价值 。 


迅雷 是 一 个 非常 重视 人 才 、 重 视 拉 术 的 公司 。 从 迅雷 下 载 ， 到 水 晶 计划 ， 很 多 核心 项 目 都 是 拷 术 人 才 推 动 。 人 才 是 企业 的 核 
心 芝 争 力 ， 从 企业 理念 到 企业 文化 ， 无 不 体现 了 人 才 兴 企 的 价值 观 。 招 聘 官网 是 人 才 与 企业 之 间 的 一 座 桥 梁 ， 通 过 招聘 官网 ， 看 
到 的 不 仪 是 岗位 的 需求 和 公司 的 蚀 利 ， 更 是 企业 文化 和 品牌 价值 观 的 传 地 。 


无 论 是 能 让 你 感受 到 公司 底 缠 和 能 实现 人 生 价 值 的 社会 招聘 官网 ， 还 是 充满 活力 、 了 敢于 创新 的 校园 招聘 官网， 我 们 都 会 采用 
一 些 情感 化 的 设计 元 素来 打动 人 心 。 初 见 是 一 种 绿 分 ， 留 下 便 是 相互 的 信任 。 我 们 期 待 更 多 有 抱负 、 有 梦想 的 有 绿 人 加 入 迅雷 这 
个 大 家 庭 。 


第 4 章平 衡 商 业 价 全 与 用 户 价 值 的 设计 之 路 


商业 价值 与 用 户 价值 束 轻 就 重 ” 在 进行 产品 设计 时 ， 要 突出 商业 转化 又 要 考虑 用 户 体 验 ， 设 计 师 往 往 吉 恼 于 “按钮 大 破坏 页 
面 整 体 视 完 效果 ， 按 钮 小 用 尸 点 击 欲 不 高 “推广 内容 人 在 吸引 用 尸 注意 的 同时 又 打扰 了 用 户 阅 读 或 操作 ”， 种 种 问题 仿佛 将 我 们 
卷 入 了 一 个 不 可 调和 的 矛盾 体 ， 在 它们 同时 出 现 的 时 候 总 免不了 唇 枪 天 剑 。 这 个 时 候 多 硕 刻 能 够 找到 一 种 方法 ， 帮 助 设计 师 找 到 
一 个 可 以 完美 平衡 两 者 的 设计 方案 ， 而 寻找 这 个 方法 是 设计 师 的 一 个 重要 修炼 过 程 。 本 章 中 我 们 将 一 起 了 解 什么 是 商业 价值 和 用 
户 价值 ， 平 衡 二 者 的 方法 有 哪些 ， 如 何 验证 方法 应 用 的 效果 ， 以 及 设计 师 在 这 个 过 程 中 不 断 成 长 的 目 我 修 痢 。 


4.1 商业 和 用 户 的 关系 


4.1.1 商业 产品 与 用 户 产 品 


互联 网 产品 主要 有 商业 产品 、 用 户 产 品 和 平台 产品 等 几 种 类 型 ， 谈 论 较 多 的 是 商业 产品 和 用 户 产品 ( 见 图 4-1) ， 一 般 我 们 
襄 的 商业 产品 ， 是 指 ToB 产 品 (То Business) ， 面 向 商户 、 企 业 及 机 构 的 产品 ， 在 产品 出 现 之 初 商业 模式 哆 基本 确定 ， 有 明确 
的 产品 收费 方案 ， 例 如 网 易 邮箱 企业 版 、QQ 企 业 版 等 ， 都 需要 企业 付费 购买 才能 使 用 ， 使 用 群体 也 局 限于 企业 内 部 用 户 ; 用 户 
产品 ， 是 指 ToC 产 品 (To Customer) ， 面 向 消费 者 、 用 户 及 个 人 的 产品 ， 通 过 满足 用 户 需 求 来 逐步 实现 商业 利益 ， 在 产品 出 现 
的 时 候 忽 利 模式 并 不 确定 。 目 前 大 多 数 互 联网 产品 都 是 用 户 产 品 。 两 种 产品 的 本 质 舌 异 在 于 商业 模式 的 人 不同。 商业 模式 : 包含 了 
产品 模式 、 用 尸 模式、 推广 模式 、 收 入 模式 ， 我 们 提供 一 个 什么 样 的 产品 ， 给 什么 样 的 用 户 创 造 什么 样 的 价值 ， 在 创造 用 户 价 值 
的 过 程 中 ， 用 什么 样 的 方法 获得 商业 价值 。 


商户 /企业 / 机 构 消费 者 /用 尸 / 个 人 
| 免费 使 用 
付费 使 用 盈利 模式 通过 广告 及 增值 服务 寺 鳃 利 
定向 推广 ”推广 模式 大 众 化 /口碑 推广 
需求 单一 、 专 业 性 强 需求 多 样 化 、 个 性 化 
注重 功能 及 服务 注重 设计 及 体验 
逻辑 性 、 结 构 化 同 理 化 、 场 景 化 


图 4-1 商业 产品 与 用 户 产品 


产品 模式 的 区 别 市 来 产品 设计 的 区 别 ， 商 业 产 品 通 弟 直 接 面 对 客 户 ， 客 户 的 需求 通 弟 是 功能 局 于 人 交互， 服务 遍 于 体验 ， 设 计 
师 对 客 尸 和 行业 的 了 解 尤 为 重要 ， 如 何 把 比较 复杂 的 业务 逻辑 清晰 化 、 元 素 结构 化 对 于 设计 师 来 说 是 个 挑战 。 用 尸 产 品 面 对 的 是 
用 尸 ， 用 尸 的 需求 是 多 样 化 、 个 性 化 的 ， 因 此 严 品 在 设计 和 用 户 体 验 上 的 牵 异 就 成 为 产品 占领 用 己 市 场 的 捕手 铜 。 


41.2 ” 丙 业 价值 与 用 户 价 但 


无 论 是 商业 产品 还 是 用 户 产 品 ， 最 终 目 的 都 是 商业 化 ， 即 获取 商业 利益 。 正 如 上 文 所 说 ， 商 业 产 品 大 多 数 在 诞生 之 初 残 有 了 
明确 的 收费 万 案 ， 可 以 为 企业 市 来 收益 ， 而 用 尸 产 品 大 多 是 免费 使 用 的 ， 积 肾 了 一 定 的 用 户 量 和 用 户口 碑 之 后 ， 表 通过 广告 、 增 
值 服务 等 方式 为 企业 创造 收益 ， 进 而 走 上 产品 商业 化 的 道路 ， 如 图 4-2 所 示 。 


图 4-2 ”产品 商业 化 


所 谓 商 业 价 值 是 指 事 物 在 生产 、 消 费 、 交 易 中 的 经 济 价 值 ， 通 常 以 货币 为 单位 来 表示 和 和 测量。 简单 来 说 ， 商 业 价 值 就 是 以 金 
钱 来 衡量 经 济 利润 的 一 种 价值 取向 ， 对 于 互联 网 产品 而 言 束 是 用 户 付费 ;用户 价值 是 指 某 款 产 品 通 过 满足 用 户 需 求 ， 帮 助 用 户 解 
决 问题 ， 通 常 以 用 户 量 、 用 户 满 意 度 等 指标 来 稀 量 。 


互联 网 产品 的 特性 决定 了 用 户 是 产品 友 展 的 重要 决定 因素 ， 寻 找 并 创造 用 户 价 值 点 是 产品 的 头等 大 事 ， 但 是 当 产 品 友 展 到 一 
定 的 阶段 ， 奶 求 商业 价值 的 脚步 开始 逐步 通 近 ， 随 看 广告 和 增值 服务 等 单 见方 式 的 出 现 ， 原 本 简洁 、 流 畅 的 产品 可 能 会 随 着 各 种 
弹 窗 、 上 广告 位 、 运 言 推广 等 内 容 渗透 而 遭 到 用 户 的 芭 感 甚至 是 抵触 ， 这 个 时 候 困 扰 我 们 的 问题 融 出 现 了 ， 产 品 的 商业 价值 与 用 户 


价值 该 如 何平 衡 〈 见 图 4-3) ? 


用 户 价 值 商业 价值 


图 4-3 ”商业 价值 与 用 户 价值 的 平衡 


42 平衡 商业 作 值 与 用 尸 价值 的 设计 万 冯 


在 寻找 平衡 点 的 道路 上 ， 商 业 价 值 与 用 户 价 值 真 的 水 火 不 容 吗 ? 虽然 我 们 知道 答案 一 定 是 否定 的 ， 但 是 如 何 通 过 行 之 有 效 的 
方法 找到 这 个 平衡 点 ”我 们 所 认为 的 平衡 实际 效果 又 如 何 ” 我 们 的 目标 是 商业 价值 和 用 户 价值 可 以 以 一 种 相辅相成 的 天 系 仔 任 ， 
二 者 螺旋 上 升 ， 共 同市 动 企业 及 产品 的 友 展 。 帮 助 我 们 达到 平衡 的 这 些 廊 法 束 如 同 天 平 上 的 硫 码 ， 它 们 的 存在 对 于 设计 师 来 说 是 
解决 产品 和 运营 矛盾 的 必 备 拉 能 ， 下 面 我 们 束 来 讨论 一 下 可 以 平衡 二 者 的 方法 以 及 实现 的 效果 。 


4.2.1 聪明 的 YouTube 


做 产品 时 ， 我 们 需要 对 产品 的 商业 模式 和 目标 用 户 有 足够 的 了 解 ， 因 为 创造 商业 价值 依赖 商业 模式 ， 创 造 用 户 价值 围绕 目标 
用 户 ， 不 了 解 产 品 、 不 了 解 用 户 的 设计 一 定 空 洞 的 ， 更 何 谈 价值 的 实现 。 通 过 合理 的 商业 模式 来 保障 用 户 体 验 是 从 根源 上 解决 二 
者 矛盾 的 一 种 有 效 方式 ， 也 能 从 中 看 出 一 个 企业 对 于 其 用 户 的 尊重 和 仿 度 ，YouTube 是 这 方面 的 典范 ( 见 图 4-4) ， 真 正 做 到 了 
商业 和 用 户口 碑 的 双赢 。 它 是 如 何 实现 的 呢 ? 


图 4-4 ”聪明 的 YouTube 


乍 先 ，YouTube 推 出 了 只 有 被 持续 观看 30s 以 上 的 广告 才 会 收费 的 TrueView 模 式 ， 人 允许 用 户 观看 5s 后 天 闭 ， 并 非 强制 用 户 
观看 30s 或 观看 完毕 ， 投 放 广 告 的 客 尸 只 为 观看 超过 30s 的 有 效用 尸 买 单 ， 不 必 为 这 些 选择 跳 过 的 观众 支付 广告 投放 费 。 这 种 商 
业 模 式 形 成 了 一 把 双 刃 剑 ， 通 过 允许 用 尸 5s 关 闭 保 护 并 尊重 了 用 户 的 自由 控制 权 ， 用 尸体 验 极 佳 。 同 时 也 对 广告 的 质量 提出 了 较 
高 的 要 求 ， 使 用 TrueView 的 广告 往往 前 几 秒 十 分 抢眼 ， 尽 可 能 地 在 5s 的 时 间 内 吸引 住 用 户 的 目光 ， 用 高 超 的 剪辑 技巧 让 用 户 心 
甘 情愿 地 选择 看 下 去 。 而 那些 用 户 不 喜欢 、 不 感 兴趣 、 主 动 关 闭 了 的 广告 也 束 被 淘汰 了 ， 形 成 了 民 性 循环 。 对 于 投放 广告 的 客户 
来 说 ， 昌 然 不 足 30s 的 观看 不 需要 支付 费用 ， 但 同样 也 没有 达到 广告 宣传 的 效果 ， 对 用 户 的 转化 富 无 意义 ， 所 以 他 们 还 是 希望 用 
尸 看 足 30s， 于 是 拼命 制作 出 高 质量 的 广告 内 容 ， 让 用 户 不 再 有 反感， 让 看 广告 成 为 一 种 享受 。 所 以 TrueView 在 提升 广告 质量 进而 
改善 视频 用 尸 观看 体验 的 同时 ， 也 为 广告 品牌 做 了 以 兴趣 为 往 选 标准 的 观众 匹配 ， 大 大 提高 了 广告 有 效 触 达 率 ， 降 低 视 频 网 站 的 
用 户 流失 率 。 这 样 一 来 ， 用 户 满意 ， 客 户 满意 ，YouTube 的 商业 收益 也 满意 ， 可 见 ，TrueView 是 种 多 方 共 赢 的 模式 。 


YouTube 在 移动 端 做 了 一 个 新 的 尝试， 推出 了 名 叫 Bumper ads 的 新 广告 形成 ， 长 度 为 66， 但 是 无 法 跳 过 。YouTube 不 是 
用 Bumper ads 代 蔡 了 之 前 的 TrueView 模 式 ， 而 是 将 其 作为 一 种 补充 ， 广 告 主 们 可 以 根据 自己 不 同 的 需求 来 使 用 不 同 的 广告 形 
式 。 将 其 与 之 前 5s 能 跳 过 的 30s 广 告 相 比 ， 本 质 上 Bumper ads 多 续 了 1s， 但 是 总 时 长 6s， 对 广告 的 内 容 和 质量 提出 了 更 高 的 要 


其 次 ，YouTube 的 广告 可 以 准确 定位 到 目标 人 群 ， 所 有 投放 到 YouTube 的 广告 ， 在 投放 的 时 候 都 会 明确 广告 天 键 字 、 目 标 
人 群 的 资料 (如 性 别 、 年 龄 、 地 域 、 用 尸 浏 览 的 兴趣 和 类 别 等 信息 ) ， 同 时 依靠 Google 强 大 的 账号 系统 和 数据 支持 ， 使 得 广告 
的 针对 性 相当 强 。 例 如 ， 近 期 在 Google 上 搜索 过 汽车 价格 的 用 尸 ， 在 看 YouTube 的 时 候 ， 出 现 的 是 BMW 最 新 款 的 广告 ， 用 户 
在 准备 观看 游戏 视频 的 时 候 ， 出 现 的 是 同类 型 、 同 公司 游戏 的 广告 等 。 与 用 户 的 行为 、 兴 趣 崇 崇 相 连 ， 我 们 剃 说 “兴趣 是 最 好 的 
转化 剂 ”， 真 正 做 到 了 想 用 户 之 所 想 急用 户 之 所 急 ， 用 户 的 感受 就 不 再 是 反感 、 抵 触 ， 而 是 惊喜 和 欢呼 。 

对 国外 广告 投放 数据 分 析 可 以 友 现 ，YouTube 的 TrueView 广 告 形式 和 精准 投放 ， 用 尸 点 击 率 明 显 提升 ， 平 均 停 留 时 长 提高 
了 15%; 吸引 而 来 的 广告 商 同 比 增加 40%， 前 一 百名 广告 商 在 YouTube 上 的 投入 同比 上 涨 60%。 一 支 时 长 超 3min 的 广告 片 ， 观 
看 超过 30s 以 及 看 完整 个 广告 的 受众 比例 均 远 超 50%， 点 击 率 较 常 规 广 告 高 出 数 倍 。 


从 Youtube 的 案例 中 我 们 可 以 思 结 出 平衡 商业 价值 和 用 户 价 值 的 几 种 方法 : 
第 一 ， 结 合用 户 使 用 场景 设计 : 在 用 户 观 看 视频 的 场景 下 推送 广告 ， 而 非 在 页 面 内 堆砌 布局 ; 
第 二 ， 提 升 设计 质量 ,给 用 户 在 观看 时 市 来 愉 忱 感 : 高 质量 的 视频 创意 和 内 容 让 看 广告 成 为 一 种 享受 ; 


三 ,不 同行 为 和 标签 的 用 尸 设 计 内 容 夺 异化 、 精 准 化 : 推送 与 当前 观看 视频 强 相关 或 与 用 户 搜 索 浏 览 记录 强 相 天 的 广告 内 


IB 
/. 
о 


以 上 几 种 方法 ， 迅 雷 在 实际 项 目的 需求 设计 中 也 均 有 所 应 用 ， 并 在 实践 中 总 结 了 更 多 行 乙 有 效 的 方法 ， 下 面 来 逐一 看 一 下 这 
些 方法 和 应 用 。 


422 万 法 探寻 与 应 用 


1. 结 合用 尸 使 用 场景 设计 
结合 用 户 使 用 场景 设计 ， 即 将 设计 方案 与 用 户 的 使 用 流程 和 操作 界面 结合 起 来 ， 不 打 断 用 户 的 操作 或 珀 立 在 页 面 中 人 存 任 ， 这 
种 设计 方法 在 迅雷 PC 客户 端 和 手机 迅雷 APP 的 设计 中 被 广泛 应 用 。 


在 迅雷 PC 客 尸 端 中 ， 除 了 满足 用 户 下 载 资 源 的 功能 性 需求 ， 我 们 需要 将 迅雷 会 员 可 以 加 速 下 载 的 信息 传递 给 用 尸 ， 将 迅雷 
会 员 “ 下 载 加 速 ” 的 王牌 特权 融合 到 用 户 日 弟 的 下 载 场景 中 ， 并 且 在 下 载 中 、 下 载 后 两 个 关键 触 点 做 了 不 同形 式 的 引导 ， 增 强 用 
尸 开 通 会 员 的 欲望 ， 从 而 拉动 会 员 的 收入 。 


下 载 中 ， 展 示 当 前 下 载 速度 的 同时 ， 推 荐 用 尸 试 用 会 员 加 速 ( 见 图 4-5) ， 让 用 户 切身 感受 加 速 前 和 加 速 后 的 差异 ， 试 用 结 
束 后 引导 用 户 开通 会 员 。 


ç 点 击 登录 


С. massal 
[Cold War] IPS852F367220PESBD-R (5) [s] 
ММВ ЕНЕС] 


101 GB 34416 3013388 ШЕШӘ 


在 此 视频 =з 电视 局 


94-5 迅雷 9 会 员 加 速 试 用 场景 设计 


下 载 后 ， 以 本 次 下 载 任务 的 “成 绩 单 ”切入 用 户 场景 ， 对 成 绩 单 进行 差异 化 和 显 性 化 设计 ， 对 比 会 员 与 非 会 员 的 下 载 速 度 和 
时 长 等 数据 ， 显 性 化 展示 会 员 往 利 ， 让 用 户 直观 地 看 到 会 员 的 优势 ， 从 而 刺激 用 户 转化 ， 如 图 4-6 所 示 。 


85 这 县 的 Scott : Ж К ОСМЕ For YQQ-exe 的 下 载 ， 内 下 是 这 的 成 沉 单 : 


Ba Hattls,npt-Setup-ChN ехе лы: 

287 МЕ 2018-05-21 1751 Е 下 载 时 长 00:1 2:35 = sate 000210, 05ГЕ ШЕ>> алаш HST 

Et 563.32 Kbys ,超过 saw 用 户 , ЕЕ Е Воз: 8] 120,548 

EE [ШЕх. zip | | "АЁ 
ДЕБ.55 КЕ S15-DS-13 0551 ` 平 光 速度 ӨбӨКЬ/$ жо БЕШЕНЕГЕ МЫ, В. ШОНЕН оар 


{ odusicForv ШС ехе 迅 要 电 胰 网 “日 万 访问 


2225 VE 0015-05-31 161 


超越 用 户 88% ФЕР вр Е. ЕЕ ТУБ 


幸 国 登录 5 次 【3 五】 Ж БЭЗ: ( 6710) ЖЕТКЕНДЕ ( 23724) АНВОР (210 ] 
БА штлнан!! +. сч ЖЕП ПЛАНШЕТ Зул ТАЕ 


ЗЕЕ 502.32 КЬ/Б , ЖЕШ 0895 Fla , 20780880. 


94-6 ”迅雷 9 成 绩 单 设计 


在 移动 端 手机 迅雷 APP 上 ， 我 们 同样 延续 了 场景 化 设计 的 思路 ， 用 户 通 过 手机 迅雷 建立 下 载 任务 时 ， 针 对 非 会 员 用 户 推荐 用 
户 试 用 “会 员 加 速 ”， 试 用 后 引导 用 户 开 通 会 员 ， 如 图 4-7 和 图 4-8 所 示 。 


Ф101) 


Вайе net-Setup-CGN: exe 


优 步 -Uber( 车 ... [A0| ”我们 的 法 则 


超人 回来 了 九州 天 空城 


已 用 宇 间 :11.4GB 可 用 室 间 :#06.0NB 


图 4-7 手机 迅雷 试用 引导 设计 


下 载 暂 售 


ч ! г Е 1 
= Е i "| | | | 
э z н" 19 й 


Battle.net-Setup-CN.exe 


se 服饰 家 居 体 育 盛 喜 ， 大 牌 直 降 
wo 1 低 至 9.9 


"Ta = 


Б.Е [81:114658 P| EE ЕП ИО ЕР 


图 4-8 手机 迅雷 开通 会 员 引 导 设 计 


通过 场景 化 的 会 员 特权 感知 和 引导 ， 在 迅雷 9 的 客户 端 和 手机 迅雷 的 下 载 任务 列表 页 ， 会 员 开通 量 及 转化 率 极为 理想 ， 高 于 
同 产品 中 其 他 页 面 的 支付 转化 率 。 
2 提升 设计 质量 


产品 商业 化 最 冲 用 、 最 直接 的 万 法 融 是 在 产品 中 加 入 广告 、 运 吾 活动 等 内 容 。 提 起 广告 ， 用 户 难免 会 有 一 些 抵触 心理 ， 如 同 
电视 节目 中 插播 的 广告 ， 电 影 中 植 入 的 广告 ， 已 被 无 数 次 吐槽 ， 产 品 商业 化 过 程 中 也 很 容易 让 产品 变 成 “广告 集 散 地 ”，5 引 来 用 
户 的 反感 甚至 是 弃 用 。 但 广告 中 也 不 之 创意 无 限 的 优质 内 容 ， 让 人 们 专门 为 了 看 广告 而 来 ， 欲 里 不 能 。 例 如 可 口 可 乐 的 创意 广 
告 ， 让 用 户 感 受到 其 品牌 的 魅力 和 价值 ; 微 信 朋友 圈 中 根据 用 户 身份 推送 的 广告 ， 成 为 社交 群体 中 身份 、 地 位 的 象征 ; 一 度 红包 
朋友 圈 ， 被 转 友 无 数 的 移动 端 H5 动 态 创意 广告 一 一 《 吴 亦 凡 即 将 入 伍 ? 》 给 人 耳目 一 新 的 感官 体验 ( 见 图 4-9) .…… 所 以 ， 提 升 
广告 质量 是 降低 用 户 负 面 情绪 甚至 实现 “路 转 粉 ”的 有 效 途 径 。 
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图 4-9 ”腾讯 游戏 H5 推 广 广告 


提升 广告 质量 的 途径 包括 : 广告 形式 的 创新 (移动 端 H5 互 动 式 ) ;广告 内 容 的 提高 。 


在 迅雷 会 员 PC 官 网 的 改版 设计 中 ， 我 们 尝试 告别 官网 “广告 集散 地 ”的 形象 ,减少 硬 推广 ， 既 服务 于 会 员 用 尸 ， 又 让 用 户 
清楚 地 知道 会 员 的 特权 和 优势 。 形 式 上 ， 把 不 同类 型 的 会 员 、 不 同 的 使 用 状态 ， 用 场景 化 大 图 和 生活 化 文案 展现 ， 以 一 屏 一 图 的 
方式 ， 用 户 每 滚动 一 次 鼠标 ， 整 屏 切 换 ，3 引 导 用 户 的 浏 儿 和 视 迪 焦点 随 着 每 一 屏 的 切换 而 更 聚焦 ( 见 图 4-10 和 图 4-11) 。 
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内 容 上 ， 握 弃 了 传统 活动 和 广告 页 的 样式 ， 去 挥 业务 推广 的 内 容 ( 见 图 4-12) ， 将 会 员 特 权 的 介绍 和 支付 引导 这 部 分 重要 
内 容 融 入 用 户 的 实际 使 用 场景 中 ， 以 真实 人 物 为 素材 ， 以 更 目 然 的 方式 打动 用 户 ， 塑 造 优 质 的 迅雷 品牌 形象 ， 告 别 难以 理解 
的 “文字 + 图 标 ” 的 介绍 方式 、 伦 哨 又 之 无 天 联 的 素材 背景 ， 以 及 孤立 突 刀 的 支付 按钮 ， 不 再 给 用 尸 强加 我 们 想 让 他 看 到 的 内 
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3. 关 异化 、 精 准 化 设计 


互联 网 产品 重视 如 何 更 好 地 满足 用 户 需求 ， 而 用 户 的 多 样 化 和 个 性 化 决定 了 同一 个 需求 在 不 同性 格 、 年 龄 、 地 域 、 时 间 段 的 
人 和 群 中 有 着 非常 大 的 笑 异 ， 需 要 在 设计 的 时 候 束 充分 考虑 到 其 中 的 牵 异 ， 以 不 同 的 色彩 、 风 格 、 元 素 、 样 式 、 操 作 、 反 馈 等 搭配 
不 同 的 内 容 ， 精 准 地 满足 不 同类 型 用 户 的 需求 。 在 运 豆 领 域 中 有 一 个 “5R (Right) 原则 ”: 将 正确 的 内 容 (1R) 以 正确 的 方式 
(2R) 在 正确 的 时 间 (ЗК) 正确 的 地 点 (4R) 推荐 给 正确 的 人 (5R) ， 也 融 是 我 们 所 襄 的 基于 用 户 的 精准 推送 。 设 计 在 这 个 过 
程 中 主要 承担 输出 “正确 的 内 容 ”， 了 解 产 品 的 定位 、 目 标 用 户 的 特征 喜好 ， 通 过 设计 将 我 们 对 产品 和 用 户 的 理解 表达 出 来 。 


将 “5R 原 则 ”用 到 极致 的 是 淘宝 网 闭 名 的 “ 干 人 干 面 ” 策 略 。 干 人 干 面 的 概念 最 早出 现在 广告 学 里 面 ， 根 据 心理 学 中 
的 “迎合 心理 ”演变 而 来 ， 在 很 多 门户 网 站 的 广告 系统 中 应 用 ， 例 如 用 户 人 在 百度 搜索 一 次 “迅雷 加 速 ”， 那 么 再 去 跟 和 百度 广告 联 
嚼 合作 的 网 站 ， 都 会 在 左右 两 人 出 ,或 者 文章 中 、 视 频 中 ， 看 到 “迅雷 加 速 ” 的 广告 。 淘 宝 官 网 对 干 人 干 面 的 介绍 为 “定向 推广 ,， 
依靠 淘宝 网 庞 大 的 数据 库 ， 构 建 出 买 家 的 兴趣 模型 。 它 能 从 细 分 类 目 中 抓 取 那 些 特征 与 买 家 兴趣 点 匹配 的 推广 宝贝 ， 展 现在 目标 
客 尸 浏 史 的 网 页 上 ， 帮 助 卖家 锁定 潜在 买 家 ， 实 现 精 准 营 销 。” 根 据 用 户 的 购买 记录 、 搜 索 行为 、 浏 哆 路 径 、 购 物 车 和 收藏 夹 记 


录 ， 给 每 个 用 户 推 荐 不 同类 型 、 不 同 颤 色 、 不 同 革 式 的 商品 ， 每 个 用 户 看 到 的 内 容 都 不 同 ， 同 一 个 用 户 不 同时 期 看 到 的 内 容 也 不 
同 ， 真 正 做 到 了 5R 原 则 ， 转 化 率 得 到 了 极 大 的 提高 ， 示 例如 图 4-13 ~ 图 4-16 所 示 。 
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图 4-13 ”女性 用 户 A 的 淘宝 APP 首 页 页 面 
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94-14 ”女性 用 户 B 的 淘宝 APP 首 页 页 面 
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图 4-15 “男性 用 户 A 的 淘宝 APP 首 页 页 面 
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图 4-16 ”男性 用 户 B 的 淘宝 APP 首 页 页 面 


在 迅雷 的 产品 中 ， 我 们 将 差异 化 和 精准 化 的 设计 应 用 到 了 不 同 身份 用 尸 看 到 的 个 人 信息 页 面 上 ， 在 迅雷 客 尸 端 中 ， 进 行 用户 
信息 展示 及 引导 的 时 候 : 


` 按 用 户 状态 (未 登录 /登录 ) 进行 差异 化 设计 ， 让 每 一 位 用 户 能 够 感受 到 这 里 是 自己 的 地 一 ， 建 立 产 品 与 用 户 之 间 的 信任 
Ж, 如 图 4-17 所 示 。 


.- 按照 用 户 生 命 周 期 ( 非 会 员 / 会 员 日 常 / 会 员 快 过 期 /会 员 已 过 期 ) 在 正确 的 时 间 引 时 用 户 转 化 、 升 级 或 是 续费 ， 将 商业 价 
值 融入 其 中 。 


首先 ， 在 明确 了 差异 化 设计 的 方向 之 后 ， 设 计 和 需要 找到 一 个 可 以 将 差异 显 性 化 的 表现 方式 ， 让 用 户 在 不 同 的 状态 和 身份 下 可 
以 感受 到 这 些 差 异 。 文 字 介绍 万 陈 阅 读 成 本 很 高 ， 且 用 尸 对 文字 的 接受 度 较 低 ; 图 标的 介绍 方式 ， 辨 识 度 较 低 ， 信 息 传递 不 直 
观 ;， 而 图 是 最 好 的 阅读 方式 ， 既 可 以 快速 浏览 又 具有 愉悦 感 ， 因 此 我 们 将 表现 形式 锁定 为 四 格 漫画 。 


其 次 ， 我 们 需要 定义 出 不 同类 型 和 身份 用 户 的 漫画 内 容 脚本 。 将 漫画 场景 分 为 : 未 登录 和 已 登录 非 会 员 、 已 登录 日 金 会 员 、 
已 登录 超级 会 员 、 快 到 期 会 员 、 已 过 期 会 员 25 个 场景 ， 未 登录 用 户 和 已 登录 - 非 会 员 用 户 用 四 格 漫画 讲述 了 会 员 用 户 与 非 会 员 
户 的 差异 ; 已 登录 -日 金 会 员 / 超 级 会 员 用 户 在 展示 个 人 信息 ， 同 时 用 四 格 漫画 表现 其 当前 享受 的 特权 ; 快 过 期 会 员 用 户 引导 续 
期 会 员 用 户 情 感化 召回 。 大 大 降低 了 用 户 的 理解 成 本 和 阅读 成 本 ， 使 得 用 户 可 以 更 快速 地 了 解 内 容 . 
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图 4-17 迅雷 7 小 秘书 已 登录 /未 登录 状态 漫画 引导 差异 化 设计 


在 用 户 的 生命 周期 中 ， 每 个 阶段 匹配 不 同 的 漫画 内 容 ， 为 拉 新 和 留存 两 个 关键 指标 的 提升 市 来 了 良好 的 数据 表现 ， 如 图 4- 
18 所 示 。 
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图 4-18 迅雷 7 小 秘书 不 同 身份 、 状 态 的 漫画 引导 差异 化 设计 


将 商业 转化 的 内 容 结合 到 产品 功能 当中 ， 是 一 种 相对 友好 的 设计 方法 ， 它 理所当然 地 仔 企 于 用 户 的 使 用 过 程 中 ， 既 满足 了 内 
容 曝 区 的 要 求 ， 又 不 伤害 用 户 体验 和 页 面 的 整体 效果 。 例 如 QQ 聊天 窗口 中 ， 在 文本 模式 聊天 对 话 的 基础 上 为 其 增加 了 气泡 模 
陈 。 气 泡 的 样式 可 以 根据 个 人 的 喜好 更 损 。 这 时 候 在 气泡 的 使 用 上 出 现 了 会 员 与 非 会 员 的 差异 ( 见 图 4-19 和 图 4-20) ， 对 于 用 
尸 而 言 ， 聊 天 气泡 是 跟随 着 用 尸 社交 过 程 中 的 每 一 句 友 言 而 出 现 ， 是 他 上 自身 的 一 部 分 ， 所 以 选择 目 己 喜欢 的 、 好 看 的 、 可 以 代表 
目 己 形象 的 或 者 侈 比 别人 的 样式 ， 束 成 了 用 尸 转化 的 一 个 强 有 力 的 而 又 目 然 而 然 的 动机 。 


图 4-19 QQ 客户 端 对 话 气 泡 设计 
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94-20 QQ 对 话 气 泡 VIP 引 寻 设 计 


这 种 方法 我 们 在 迅雷 9 客户 端 中 进行 了 尝试 和 应 用 ， 在 用 己 下 载 资 源 的 “ 资 


ЖЕ [5—1 ЖЫЛАТ Р 功能 
员 的 评论 样式 差异 ， 增 强 会 员 用 户 评论 时 的 专属 头像 、 红 名 和 氛围， 打造 会 员 


过 设计 会 员 和 非 
氛围 ， 打 造 会 员 的 优越 感 和 尊贵 感 ， 满 足 用 户 在 社交 群体 中 寻求 存 
在 感 、 烃 炊 的 心里 诉求 ， 如 图 4-21 所 示 。 
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4-21 资源 评论 会 员 与 非 会 员 评论 差异 化 设计 


同时 ， 对 该 功能 下 市 来 的 支付 转化 浮 层 做 了 i 


ЗҮГ, ВРЕ 
心理 预期 不 待 ， 匹 配 当 前 功能 凸显 评 ) 


面 点 击 开通 会 员 时 ， 痉 用 了 通用 的 支付 浮 层 ， 与 用 户 的 
台 红 名 和 身份 名 牌 的 特权 ， 保 持 信息 的 连续 性 ， 让 用 户 的 操作 一 气 呵 成 ， 如 图 4-22 所 示 。 
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94-22 ”迅雷 9 会 员 评 论 特权 支付 引 寻 浮 层 
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5. 理 性 化 设计 


理性 化 设计 是 借助 理性 的 方法 做 决 案 的 一 种 设计 思维 万 式 ， 在 进行 设计 方案 族 选 和 决策 的 过 程 中 ， 当 遇 到 强烈 的 个 人 主观 意 
愿 主导 时 、 当 多 方 意 见 无 法 达成 一 致 时 、 当 商业 和 用 户 平 衡 的 设计 方案 受到 质疑 时 ， 为 了 减少 主观 因素 对 产品 的 影响 和 干扰 ,， 我 
们 将 产品 放 到 市 场 中 ， 用 最 客观 、 最 真实 的 用 户 反馈 来 决定 和 验证 方案 与 用 户 需求 之 间 的 匹配 度 ， 设 计 师 需要 了 解 这 些 方 法 以 及 
每 个 方法 的 实现 方式 和 适用 条 件 ， 推 动 方法 的 应 用 ， 为 保持 设计 的 主动 性 ， 创 造 民 好 的 设计 环境 。 


(1) 接受 度 测试 


在 设计 和 初期， 快速 输出 设计 原型 ， 将 设计 原型 给 到 目标 用 户 ， 模 拟 使 用 场景 ， 测 试用 户 对 该 方案 的 接受 程度 并 从 中 上 友 现 问 
题 ， 及 时 进行 优化 和 修改 ， 避 免 当 方案 的 完成 度 较 局 时 修改 市 来 更 大 的 工作 量 ， 同 时 也 为 设计 方案 提供 了 可 靠 的 依据 ， 更 经 得 起 
挑战 和 推 融 。 设 计 师 输 出 的 原型 可 以 是 纸 面 原型 ( 见 图 4-23) ， 模 拟 操作 环境 ; 也 可 以 用 制作 快速 原型 的 设计 软件 来 输出 可 在 
手机 中 真实 交互 的 原型 ， 例 如 POP (Prototyping on Paper) 和 Mockup Builder 等 。 


94-23 аж (来 自 百度 ) 


接受 度 测试 方法 的 优势 是 快速 、 修 改 成 本 低 ， 无 论 是 大 版 本 上 线 、 达 代 ， 还 是 小 的 功能 点 优化 都 适合 ， 但 需要 有 日 党 维护 的 
目标 用 户 群 体 ， 可 以 配合 快速 地 给 出 反馈 和 测试 结果 ， 如 图 4-24 所 示 。 
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图 4-24 ”原型 模拟 测试 (来 自 百度 ) 
(2) 小 流量 测试 


小 流量 测试 是 快速 验证 设计 想法 和 设计 万 案 合 理性 的 最 有 效 方法 之 一 ， 即 在 当前 产品 的 忌 访问 流量 中 分 配 一 小 部 分 流量 (ЕА 
分 比 一 般 为 10% ~ 20%， 依 据 具 体 情 况 目 定义 ) ， 这 一 小 部 分 沅 量 市 来 的 用 户 看 到 的 是 测试 方案 ， 将 测试 方案 中 的 各 个 数据 与 大 
流量 方案 中 对 应 的 数据 做 对 比 ， 若 数据 表现 好 ， 则 将 测试 方案 做 全 量 推 广 ， 若 测试 效果 不 理想 ， 因 占 比 较 小 ， 对 整体 大 数据 的 影 
响 也 相对 较 小 。 


小 流量 测试 分 两 种 情况 : 对 于 新 产品 而 言 ， 在 全 面 投入 市 场 前 ， 可 以 邀请 一 部 分 用 尸 率 先 使 用 ， 收 集 用 尸 有 反馈 和 优化 建议 ， 
观察 产品 在 使 用 过 程 中 的 表现 ， 经 过 磊 代 优化 后 册 发 布 正 式 版 ;对 于 老 产 品 的 优化 ， 可 以 选择 在 部 分 版 本 或 者 部 分 流量 的 用 己 中 
展现 优化 后 的 方案 ， 通 过 这 部 分 的 数据 反馈 与 老 版 本 进行 数据 对 比 ， 从 而 验证 新 版 本 的 效果 。 


我 们 来 看 一 个 小 流 量 测试 的 案例 。 迅 雷 PC 客 户 闯 7.0 是 较 稳 定 上 且 用 户 量 较 大 的 版 本 ， 也 是 实现 产品 商业 化 的 重要 渠道 ， 在 其 
核心 的 下 载 页 面 石 人 出， 预 留 了 一 个 用 户 信息 展示 和 引导 会 员 转 化 的 区 域 。 在 当前 方案 的 数据 表现 起 于 稳定 的 时 候 ， 我 们 想 皖 试用 
一 种 全 新 的 表现 方式 体现 会 员 的 特权 和 氛围 ， 但 在 设计 风格 和 内 容 展示 上 如 何 突破 ， 是 困扰 设计 师 的 一 个 难题 ， 最 终 我 们 尝试 了 
全 新 的 思路 和 设计 方向 ， 但 对 现 版 改动 较 大 且 乙 前 从 未 过 试 过 ， 所 以 对 于 改版 的 效果 并 没有 十 足 的 把 握 ， 为 了 稳妥 起见， 我 们 建 
议 将 20% 的 流量 投放 到 全 新 的 方案 ， 观 测 5 天 的 数据 表现 后 ， 对 比 设计 方案 。 


虽然 全 新 万 案 人 在 视 况 上 更 加 聚焦 ， 烘 托 出 了 成 为 会 员 的 氛围 ， 也 简化 了 信息 内 容 ， 但 缺少 了 用 户 归 属 感 ， 与 用 户 目 身 的 天 联 
性 断 了 ， 将 功能 区 域 变 成 了 单纯 的 广告 推广 ， 用 户 对 这 种 万 式 并 不 买单 ， 会 员 开 通 量 下 降 了 近 40%。 而 因为 只 切 了 20% 的 流量 ， 
对 大 局 的 影响 程度 还 相对 可 控 ， 庆 笠 在 最 初 选择 了 小 流量 测试 的 方法 。 


虽然 小 流量 测试 方案 的 数据 表现 不 好 ， 但 这 丈 是 测试 的 意义 所 在 ,我 们 总 结 了 这 一 轮 的 失败 经 验 后 ,卷土重来 。 重 新 分 析 设 
计 定位 ， 优 化 方向 : 第 一 ， 现 有 万 案 在 上 线 之 初 ， 数 据 上 升 的 效果 是 非常 明显 的 ， 因 此 我 们 可 以 得 知 ， 用 尸 对 右 侧 区 域 个 人 归属 
感 的 认可 度 ， 有 头 部 的 个 人 信息 ， 该 区 域 则 被 定义 为 “我 的 ”， 没 有 丈 变 成 了 “广告 ”; 第 二 ， 现 有 方案 的 数据 经 过 一 段 时 间 的 
增长 后 趋 于 稳定 属于 正常 现象 ,借用 罗 永 浩 做 锤子 手机 的 一 句 格 言 : “改变 是 为 了 更 好 ， 而 不 是 为 了 改变 而 变 。” 因 此， 我 们 在 
验证 过 的 好 的 内 容 的 基础 上 ( 见 图 4-25) 将 好 处 放大 ， 现 有 方案 的 情感 化 漫画 是 好 的 ， 小 流量 测试 方案 A ( 见 图 4-26) 的 页 面 信 
息 清 晰 、 聚 焦 是 好 的 ， 因 此 将 两 者 结合 起 来 ， 我 们 又 输出 一 个 新 的 方案 B ( 见 图 4-27) ， 同 样 是 用 20% 的 流量 做 测试 。 
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图 4-27 ”小 流量 测试 方案 B 


小 流量 测试 万 案 B 上 线 一 周 后 ， 数 据 上 升 10% ( 见 图 4-28) ， 表 现 较 好 ， 数 据 稳定 后 ， 将 万 案 B 全 量 覆 盖 投 放 至 所 有 版 本 
中 ， 市 来 更 多 的 会 员 转 化 。 
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94-28 ”小 流量 测试 数据 结果 


(3) А/В, 


当 我 们 对 多 套 方案 举 棋 不 定 ， 或 者 多 方 意见 相持 不 下 时 ， 也 可 以 做 A/B 测 试 : 绽 合 各 方 建议 输出 方案 A 和 方案 B， 同 时 上 
线 ， 观 察 A/B 方 案 的 数据 措 标 ， 用 最 客观 的 数据 表现 来 验证 方案 的 可 行 性 、 匹 配 度 和 用 户 接 受 度 。 


再 来 看 一 个 A/B 测 试 的 案例 。 迅 雷 会 员 有 三 种 类 型 : 日 金 会 员 、 超 级 会 员 、 年 费 会 员 ， 其 中 日 金 会 员 是 这 个 大 军团 中 的 绝对 
主力 军 ， 对 整个 会 员 体系 的 收入 贡献 最 大 ， 因 而 日 金 会 员 的 留存 率直 接 影响 到 用 户 量 、 开 通 量 、 收 入 指标 等 多 个 商业 目标 的 
KP1， 所 以 我 们 的 目标 极其 明确 ， 需 要 对 即将 过 期 的 日 金 会 员 的 留存 和 已 过 期 的 日 金 会 员 的 召回 做 触 达 和 引导 。 


明确 了 业务 目标 和 设计 目标 后 ， 从 目前 迅雷 的 产品 体系 和 推广 渠道 来 看 ， 留 存 触 达 的 渠道 有 很 多 ， 但 是 我 们 优先 选择 会 员 官 
网 和 会 员 用 户 天 联 性 最 强 的 渠道 做 落地 万 案 的 尝试 。 


我 们 对 会 员 官 网 的 用 户 来 源 和 用 户 类 型 做 了 分 析 : 
1) 会 员 官 网 开通 /续费 的 天 键 用 己 触 点 : 
“ 会 员 快 到 期 用 户主 动 访问 官网 ， 续 费 强 入 口 一 一 首页 
“ 会 员 查 看 个 人 信息 访问 官网 ， 刺 激 + 引导 一 一 我 的 会 员 页 


© 外 部 链接 带 到 官网 ， 介 绍 + 引 导 一 一 首页 + 功能 特权 + 会 员 介绍 


2) 不 同类 型 用 尸 的 切入 点 : 


ЯТАР 关注 会 员 有 用 、 章 呐 
` 老 用 户 关注 会 员 优惠 、 情 感 


对 应 我 们 的 设计 目标 ， 推 导出 设计 定位 ， 如 图 4-29 所 示 。 


白金 会 员 快 到 期 用 户 的 设计 推导 
目标 用 户 白金 会 员 、 快 到 期 
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图 4-29 ”设计 方向 推导 


因此 我 们 将 设计 方向 锁定 为 首页 浮 层 、 推 优惠 、 打 情感 路， 采用 弹 窗 样式 的 强 触 达 ， 只 针对 会 员 有 效 期 已 小 于 15 天 的 以 及 
会 员 过 期 15 天 以 内 的 用 尸 做 定 同 投放 ， 但 是 对 推送 给 用 户 的 内 容 若 酌 了 很 久 ， 弹 窗 的 触 达 万 式 很 强 ， 我 们 希望 内 容 可 以 尽量 精 
准 ， 将 对 用 户 的 打扰 降 至 最 低 ， 对 于 老 用 户 而 言 ， 优 惠 和 情感 化 哪 一 个 更 能 打动 用 户 ? 


1) 15 天 后 过 期 的 白金 会 员 用 提前 续费 优惠 和 特权 展现 两 种 方案 做 A/B 测 试 ， 如 图 4-30 和 图 4-31 所 示 。 
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2) 已 过 期 15 天 内 的 日 金 会 员 主 打 情 感 牌 ， 唤 起 用 户 曾 经 使 用 会 员 时 建立 起 的 感情 ， 以 情感 化 文案 和 四 格 漫画 两 种 方案 做 
A/B 测 试 ， 如 图 4-32 和 图 4-33 所 示 。 


图 4-32 会员 过 期 后 15 天 召回 浮 层 方案 A 


下 载 速度 慢 到 不 能 忍 .. 
坑 疆 功能 木 有 了 ?... 


怀念 以 前 神仙 和 角 明 迁 的 日 本 啊 .. 


从 两 组 A/B 测 试 的 结果 可 以 看 出 ， 过 期 前 ， 限 时 折扣 的 方案 数据 表现 更 好 一 些 ， 过 期 后 ， 四 格 漫画 的 方案 数据 表现 更 好 一 
些 ， 如 表 4-1 所 示 。 


表 4-1 A/B 测 试 数据 反馈 


会 员 到 期 前 15 天 续费 浮 层 会 员 过 期 后 15 天 召回 浮 层 
方案 B 


25.22% 


Pí 


设计 方案 
支付 转化 率 


但 是 从 四 个 方案 整体 来 看 ， 过 期 后 的 用 户 召 回 效果 要 明显 好 于 过 期 前 的 ， 除 了 选择 的 切入 后 不 同 以 外 (优惠 、 情 感化 等 ) ， 
从 数据 中 我 们 还 友 现 ， 在 支付 成 功率 方面 ， 点 击 “ 立 即 续费 ”按钮 的 成 功率 要 远 高 于 扫 二 维 码 支 付 的 成 功率 。 为 什么 ? 我 们 分 析 
可 能 是 因为 用 户 在 弹 窗 上 扫 摘 二 维 码 束 直 接 进 入 了 支付 页 面 ， 让 用 户 的 心理 预期 变化 过 快 ， 并 没有 做 好 支付 的 准备 ， 而 按钮 的 文 
案 引 导 比 较 明 确 ， 用 户主 动 点 击 支 付 按钮 就 已 经 具备 支付 的 动机 。 然 而 ,分 析 看 上 去 似乎 很 有 道理 ， 但 是 我 们 还 是 利用 了 互联 网 
快速 验证 的 优势 ， 让 数据 说 话 。 对 即将 过 期 的 两 个 方案 进行 了 修改 ,做 了 第 二 轮 的 A/B 测 试 ， 来 验证 二 维 码 和 支付 按钮 对 支付 影 
响 ， 如 图 4-34 所 示 。 
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94-34 快 到 期 众 费 浮 层 A/B 的 优化 方案 


设计 本 是 感性 的 ， 对 于 色彩 、 样 式 、 内 容 、 操 作 ， 每 个 人 的 预期 都 不 同 ， 但 是 产品 设计 不 是 为 个 人 而 做 ， 从 产品 最 初 的 需求 
来 源 到 方案 落地 ， 每 一 个 环节 都 需要 客观 地 从 真实 场景 和 和 用户 需求 出 友 ， 我 们 往往 会 陷入 目 身 或 项 目 相 天 人 员 的 主观 意愿 中 找 不 
到 万 向 ,或 者 从 我 们 现 有 的 经 验 中 无 法 判断 到 底 如 何 是 好 的 ， 因 此 ， 设 计 师 学 会 运用 理性 的 方法 辅助 设计 方案 落地 非 弟 重 要 。 


6 第 一 屏 设计 


第 一 屏 指 的 是 用 户 在 浏览 页 面 时 ， 根 据 屏 幕 大 小 ， 不 需要 滚动 姐 标 或 滑动 屏幕 丈 展 现 出 来 的 内 容 。 大 数据 统计 显示 ，PC 页 
面 用 户 深 动 鼠标 查看 第 二 屏 的 比例 仅 为 30%， 页 面 越 长 ， 帮 部 的 内 容 曝 光 率 越 低 。 根 据 “2 秒 法 则 ”， 用 户 在 页 面 的 停留 时 间 仪 
为 2 秒 ， 第 一 屏 的 设计 可 人 否 让 用 户 在 2 秒 内 看 介 ， 吸 引用 户 的 注意 力 并 继续 浏览 ， 对 用 户 的 转化 至 天 重要 。 因 此 做 设计 时 ， 在 整 
体 考虑 页 面 布局 和 内 容 的 同时 ， 还 需要 天 注 两 个 重要 环节 : 第 一 屏 的 高 度 : 重要 信息 完整 展示 给 用 户 ; 第 一 屏 的 信息 传达 : 重要 
言 乱 合 理 、 清 晰 地 展现 给 用 户 。 


从 百度 统计 的 屏幕 分 辨 率 的 使 用 情况 来 看 (来 源 于 百度 统计 所 覆盖 的 超过 150 万 的 站 点 ， 而 不 是 baidu.com 的 流量 数据 ) , 
如 图 4-35 所 示 ，PC 疾 使 用 率 较 高 的 屏幕 尺寸 为 1920x1080、1366x768、1440x900， 移 动 问 使 用 率 较 高 的 屏幕 尺寸 为 
360x640、720x1280。 不 同 的 产品 和 页 面 适 配 的 屏幕 尺寸 可 能 都 有 所 不 同 ， 设 计 师 需要 充分 考虑 到 最 小 高 度 下 的 页 面 展 示 内 
容 ， 以 保证 小 屏 用 尸 也 可 以 阅读 到 重要 信息 ， 并 在 必要 的 时 候 根 据 不 同 的 尺寸 设计 多 个 不 同 的 页 面 布 局 和 样式 ， 以 保证 用 尸 在 多 
种 状态 下 都 可 以 浏览 完整 的 信息 ， 减 少 流失 ， 提 高 转化 。 


分 辨 率 使 用 情况 


从 2016 年 1 月 1 日 到 2016 年 11 月 30 日 共 11 个 月 数据 1 360x640 ЕНЕНЕ 137% 
一 N 2 1920х1080 BB 1274% 
| 3 1366x768 ШШШ 9.22% 

4 1440x900 ШШ 6.68% 

360х640 | 5 720х17280 ШШ 5.59% 

6 1024x768 ш 4.44% 

| | 7 375x667 г B 3.85% 

| 8 320x568 == 3.80% 

| 9 1080х1920 ш 3.4896 

| | 10 1600x900 8 3.19% 

} 11 768х1024 ШШ 2.08% 

| | Е 12 其 他 ИШШЕШШЕШЕОЕШ 31.22% 


94-35 ”百度 统计 屏幕 分 辨 率 使 用 情况 


例如 ,我们 在 PC 上 设计 一 个 活动 页 面 ， 引 导 用 户 下 载 并 安 六 APP， 完 整 的 设计 稿 如 图 4-36 所 示 。 


内 容 在 1920x1080 屏 幕 下 的 效果 如 图 4-37 所 示 ， 页 面 高 度 可 以 将 核心 内 容 在 一 屏 沁 围 内 全 部 展示 。 
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图 4-37 页面 在 1080 高 度 下 的 展示 效果 


而 在 1366x768 屏 幕 下 整 出 现 了 问题 ， 第 一 屏 的 开通 按钮 不 网 了 ! 因为 在 该 屏幕 尺寸 下 ， 第 一 屏 的 高 度 只 有 768 ( 见 图 4- 
38) ， 而 设计 师 设 计 的 页 面 核心 内 容 没 有 控制 在 768 高 度 以 内 。 
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94-38 页面 在 768 高 度 下 展示 效果 


因此 ， 第 一 屏 的 高 度 设 计 人 至 关 重 要 。 首 先 ， 需 要 控制 在 第 一 屏 高 度 荡 围 内 ， 其 次 将 信息 合理 布局 在 其 中 ， 让 用 户 在 第 一 屏 清 
楚 地 了 解 信 息 的 同时 实现 重要 的 商业 转化 ， 对 于 页 面 和 设计 的 商业 价值 体现 来 说 都 非常 重要 。 


43 如 何 验 十 设计 方法 应 用 的 效果 


对 于 用 户 体 验 设 计 团 队 和 设计 师 而 言 ， 体 验 价值 和 设计 价值 的 体现 一 直 困 扰 痢 他 们 ， 近 10 年 来 ， 随 看 用 户 体验 行业 的 友 
展 ， 我们 也 在 不 断 地 探索 ， 在 互联 网 公司 中 ， 摸 索 出 来 的 最 有 效 的 方式 就 是 将 设计 效果 与 商业 指标 对 接 ， 从 用 尸体 验 的 维度 设立 
一 系列 数据 指标 ， 通 过 数据 的 变化 来 验证 设计 效果 ， 让 数据 来 说 话 。 


4.3.1 “与 商业 化 数据 指标 对 接 ， 推 导 点 对 点 验证 指标 


数据 指标 的 维度 和 指标 项 有 很 多 ， 但 是 不 同 的 阶段 、 不 同 的 目的 以 及 不 同 的 疯 位 所 关注 的 指标 项 都 会 和 所 不 同 。 例 如 ， 同 一 
个 产品 ， 产 品 经 理会 天 注 新 增 用 户 量 、 日 活跃 用 户 量 、 用 户 留 存 率 、 核 心 功能 点击 量 、 用 户 使 用 时 长 等 关键 指 标 ， 和 而 运营 人 员 则 
会 更 关注 点 击 量 、 展 现 量 、 转 化 率 、 成 功率 等 和 商业 转化 相关 的 措 标 ， 那 么 对 于 设计 师 来 况 ， 我 们 关注 哪 些 指标 来 验证 设计 效果 
е? 同样 的 ， 当 设计 面 对 不 同 的 产品 、 页 面 、 目 标的 时 候 ， 用 尸体 验 指标 也 会 动态 变化 ， 在 具体 的 项 目 中 ， 我 们 可 以 应 用 谷歌 的 
GSM 数 据 模型 来 帮助 我 们 确定 具体 的 指标 。 


“GSM” 是 设计 目标 (Goal) 、 现 象 信号 (Signal) 、 衡 量 指标 (Metric) 三 者 的 英文 首 字 母 ， 在 使 用 这 个 模型 的 过 程 
中 ， 首 先 需要 明确 设计 目标 ， 然 后 根据 不 同 的 设计 目标 来 进行 倒 推 ， 我 们 假设 设计 目标 达成 了 ， 用 户 则 会 市 来 哪些 现象 信号 的 反 
饶 ， 最 后 根据 这 些 现象 信号 确定 哪些 可 以 转化 成 数据 指标 ， 找 到 了 需要 的 数据 指标 后 ， 待 产品 上 绪 后 ， 天 注 这 些 指标 的 表现 来 验 
证 目标 是 否 达 成 ， 如 图 4-39 所 示 。 


模型 ， 


设计 目标 


设计 这 个 产品 或 功能 的 
目标 是 什么 ， 明 确 相关 
的 目标 : 提升 用 户 的 操 
作 效 率 ? 改善 用 户 对 于 
产品 的 满意 度 


现象 信号 


假如 我 们 的 实际 目标 达 
到 ， 那 么 用 尸 在 态度 、 
行为 万 面 会 产生 哪些 现 
s= == 


图 4-39 ”谷歌 GSM 数 据 模 型 


(JSE TENA 


用 户 产 生 的 这 些 信息 
有 哪些 可 以 转化 为 数 
据 指 标 


例如 ， 运 营 策 划 了 一 个 “一 分 钱 开 通 迅 雷 会 员 ” 的 活动 ， 目 的 是 吸引 新 用 户 开通 ， 那 么 我 们 逐一 来 看 一 下 这 个 活动 的 GSM 
如 图 4-40 所 示 。 
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图 4-40 ”活动 页 面 
1) 目标 (G) : 吸引 度 、 参 与 度 、 完 成 度 。 
- 对 用 户 有 较 强 的 吸引 力 ; 
:用户 参与 活动 的 积极 性 高 ; 
. 用 户 对 设 定 任务 的 完成 度 高 。 
2) 信号 (5): 如 果 我 们 达成 了 以 上 目标 则 。 
` 吸引 度 : 吸引 更 多 用 户 访问 此 活动 ， 更 多 用 户 参 与 此 活动 ， 参 与 的 用 户 乐 意 邀 请 更 多 好 友 ; 
. 参与 度 : 访问 的 用 户 都 愿意 一 分 钱 开 通 ， 开 通 的 用 户 都 参与 了 抽奖 ， 用 户 不 停 地 分 享 邀 请 链接 给 好 友 ; 
ЖА: 用 户 都 完成 了 最 终 支付 ， 可 领 奖 的 用 户 都 完成 了 领 奖 ， 用 户 都 绑 定 了 微 信号 。 
3) 衡量 指标 (М): 
` 活动 入 口 的 点 击 量 ， 参 与 按钮 点 击 量 ， 邀 请 用 户 占 比 ; 
` 支付 人 数 ， 支 付 转 化 率 ， 参 与 抽奖 用 户 占 比 ，“ 复 制 ” 按 钮 点 击 量 ; 
` 支付 成 功率 ， 领 奖 人 数 占 比 ， 绑 定 人 数 占 比 。 
其 中 ， 重 点 监测 数据 为 文 付 人 数 和 文 付 转化 率 。 具 体 推导 过 程 示意 如 表 4-2 所 示 。 


表 4-2 GSM 指 标 推导 


== ТЕТ 
吸引 更 多 用 户 访问 此 活动 活动 入 口 的 点 击 量 
对 用 户 有 较 强 的 吸引 力 更 多 用 户 参 与 此 活动 “一 分 钱 立 抢 ” 按 钮 点 击 量 
参与 的 用 户 乐 意 邀 请 更 多 好 友 邀请 用 户 占 比 


访问 的 用 户 都 愿意 一 分 钱 开通 ен 

用 户 参 与 活动 的 积极 性 高 _ т. — 
开通 的 用 户 和 都 参与 了 抽 燃 参与 抽奖 用 户 占 比 
用 户 不 停 地 分 享 邀 请 链接 给 好 友 “复制 ”按钮 点 击 量 
用 户 都 完成 了 最 终 文 付 文 付 成 功率 

用 户 对 设 定 任务 的 完成 度 高 “| 可 和 领 奖 的 用 户 和 都 完成 了 领 奖 领 奖 人 数 占 比 
ДИ АЖЕ Г 1 > 绑 定 人 数 占 比 


4.3.2 ”验证 指标 的 应 用 


建立 起 了 衡量 指标 之 后 ， 我 们 围绕 着 目标 和 用 户 信 号 进行 设计 方案 的 落地 和 转化 ， 设 计 万 案 要 在 用 尸体 验 和 视 嘻 效果 的 基础 
， 序 分 考虑 关键 措 标 在 设计 点 的 实现 ， 待 上 线 后 监测 各 个 指标 的 数据 表现 情况 ， 进 行 有 针对 性 的 验证 及 优化 。 


一 分 钱 开通 迅雷 会 员 ” 活 动 上 线 后 ， 其 他 衡量 指标 数据 表现 较 好 ， 用 尸 对 活动 的 积极 性 和 参与 度 都 很 高 ， 但 是 在 支付 人 数 
和 支付 转化 率 两 个 重点 数据 中 ， 我 们 友 现 支付 转化 率 并 未 达到 预期 ， 因 而 对 支付 流程 进行 了 新 一 轮 的 梳理 ， 定 位 问题 : 原 逻 辑 为 
先 点 击 “ 一 分 钱 立 享 ” 按 钮 ， 出 现 支 付 选 择 的 中 间 页 ， 表 次 点 击 “ 确 认 文 付 ” 按 钮 后 ， 进 入 二 维 码 扫 码 支 付 页 面 ， 支 付 操作 重复 
出 现 ， 两 次 跳 转 造成 流失 率 较 局 。 我 们 对 文 付 流程 进行 了 简化 ， 改 版 后 点 击 “ 一 分 钱 立 享 ”按钮 直接 进入 二 维 码 扫 码 文 付 页 ， 减 
少 用 尸 的 操作 步骤 ， 使 操作 更 为 顺畅 ， 降 低 流失 率 ， 如 图 4-41 所 示 。 


优化 后 ，1 步 直 接 支付 
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优化 前 ， 


图 4-41 支付 流程 优化 


优化 后 继续 观察 数据 ， 拉 新 人 数 提升 了 1.35 倍 ， 支 付 转化 率 明显 提高 ， 如 图 4-42 所 示 。 


5 月 25 日 
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b 月 ee 日 
6 月 24 日 
6 月 26 日 
6 月 28 日 
6 月 30 日 


图 4-42 ”优化 后 数据 反馈 


可 见 ， 当 我 们 设 定 了 衡量 指标 后 ， 设 计 师 可 以 清晰 地 看 到 设计 方法 和 思路 对 应 的 关键 设计 点 的 效果 ， 不 再 迷 沱 于 找 不 到 设计 
价值 的 体现 点 ， 也 不 用 对 着 一 堆 没 用 的 数据 藻 藻 筷 选 和 人 研究 ， 骨 进行 设计 优化 时 也 变 得 目标 明确 、 清 晰 ， 更 加 有 的 放 矢 。 


44 ”设计 师 的 两 业 化 修 弄 


设计 师 在 平衡 商业 价值 与 用 户 价值 的 过 程 中 ， 除 了 擎 握 一 些 有 迹 可 循 的 设计 方法 外 ， 还 需要 从 根本 上 提升 目 身 在 商业 、 产 
品 、 运 营 等 方面 的 素养 ， 内 外 兼 修 ， 才 能 在 设计 的 过 程 中游 力 有 余 ， 拿 捏 得 当 。 
1. 使 用 对 方 的 语言 和 思维 来 表达 观点 


设计 师 是 一 个 需要 专业 技能 的 职业 ,我 们 有 专业 知识 的 深度 ， 更 要 有 相关 知识 的 广度 ， 能 够 和 产品 经 理 讨论 业务 ， 能 够 和 运 
豆 探讨 数据 ， 能 够 运用 同 理 心 站 在 用 户 的 角度 思考 问题 ， 能 够 和 开 友 础 撞 实 现 效果 …… 我 们 需要 懂得 一 些 他 们 的 语言 和 思维 方 
式 ， 在 设计 的 领域 里 多 跨 出 一 步 。 设 计 师 应 具备 的 综合 素质 如 图 4-43 所 示 。 


2. 具 备 产 品 化 的 设计 思维 


正如 上 面 所 说 ,设计 师 要 可 以 与 产品 经 理 对 话 ， 懂 得 产品 经 理 的 思维 方式 ， 设 计 师 在 做 设计 的 时 候 需 要 开局 产品 化 的 设计 思 
“ыт, 〈 见 图 4-44) ， 那么 设计 师 如 何 培 养 “ 产 品 思 维 ” 呢 ? 


LK т 


心理 子 


图 4-43 ”设计 师 综 合 能 力 修养 


产品 思维 


4-44 ”设计 与 产品 共通 的 产品 思维 


第 一 ， 具 备 系统 化 、 全 面 化 的 思维 万 式 和 设计 表达 ， 不 要 局 限 在 某 一 个 点 的 设计 要 求 和 完成 效果 上 ， 而 是 从 产品 的 整体 结 
构 、 效 果 和 体验 出 友 ， 思 考 问 题 的 格局 放眼 于 全 局 。 如 果 设 计 成 A 方案 ， 那么 对 用 尸 人 出、 商业 侧 和 产品 使 用 侧 等 上 下 游 分 别 会 有 
什么 影响 ， 优 务 点 各 是 什么 ? 


二 ， 具 备 系统 化 、 全 面 化 的 工作 方法 ， 实 现 设计 闭环 ( 见 图 4-45) 。 设 计 师 要 参与 到 项 目 中 去 ， 并 在 设计 前 、 设 计 中 和 
设计 后 的 全 流程 中 跟 进 ， 对 产品 负责 ， 也 对 自己 的 设计 输出 负责 。 上 线 后 ， 效 果 的 跟 进 和 反馈 极为 重要 ,， 干 万 不 能 认为 只 要 设计 
稿 输出 了 束 万 事 大 吉 ， 最 终 设计 效果 的 好 坏 是 对 设计 价值 最 有 力 的 证 明和 肯定 ， 设 计 师 也 可 以 通过 每 一 次 的 成 功 与 失败 总 结 经 
验 ， 以 获得 自身 的 成 长 和 提高 。 


设计 闭环 


re 一 一 转化 


验 — 跟 进 
运营 or 产品 目标 一 > 转化 — 设计 目标 
设计 目标 一 一 转化 — 设计 方案 


无 形 转化 — 有 形 


94-45 ”设计 系统 化 思维 


第 三 ， 必 须 具 备 同 理 心 ， 避 免 将 主观 意愿 和 个 人 喜好 强加 到 产品 中 ， 客 观 地 将 功能 和 任务 市 入 到 真实 用 户 的 使 用 场景 中 ， 以 
ВРЕ. 


第 四 ， ВМЗ, ЗҮ ЕЛНЫ А, ЕЕ ЛА, ПОИМИ АЗЕ p —А“5, АА 
使 用 体验 和 视 竞 效果 是 影响 产品 成 败 的 天 键 因 素 ， 而 设计 师 残 是 这 个 关键 因素 中 的 关键 信物 。 


3. 了 解 目标 用 户 ， 具 备用 户 思 维 


互联 网 产品 对 用 户 体验 的 重视 程度 已 经 不 言 而 喻 ， 其 产品 的 特性 决定 了 生死 存 亡 都 取决 于 用 户 ， 因 此 满足 目标 用 户 的 真实 需 
求 是 每 个 产品 都 想 做 到 的 ， 需 要 参与 产品 的 每 一 个 环节 的 每 一 个 人 都 把 它 作 为 终极 目标 。 设 计 师 需要 时 刻 提 醒目 己 ， 所 有 设计 都 
是 基于 目标 用 户 群 的 。 那 么 ， 这 束 有 两 个 问题 : 第 一 ， 目 标 用 户 群 是 谁 ” 第 二 ， 目 标 用 户 群 的 使 用 场景 、 行 为 习惯 和 特征 喜好 是 
什么 ? 


例如 ， 我 们 在 做 手机 迅雷 的 产品 优化 时 ， 通 过 数据 分 析 来 了 解 目标 用 尸 ， 进 而 进行 有 针对 性 的 分 析 和 优化 。 通 过 数据 我 们 关 
Е: 手机 迅雷 的 用 户 是 谁 ?” 从 哪里 来 ? 做 了 什么 ?为 什么 这 样 做 ? 对 用 尸 的 相关 研究 ， 如 图 4-46 ~ 图 4-48 所 示 。 


用 户 构成 ( 30 天 ) 
高 质量 用 户 是 谁 ? 
用 户 构成 ( 30 天 ) 每 周 活跃 用 户 中 ， 忠 诚 用 户 ( 连续 活跃 5 周 ) 占 比 近 半 ， 用 户 忠 诚 度 较 高 


п 
2015-03-09 2015-03-16 2015-03-23 2015-03-30 2015-04-06 2015-04-13 2015-04-20 2015-04-27 
Ш=ш= В хаал [оа  1#®=з=н= EN 轿 上 ER4 周 用 户 сине 


图 4-46 用户 构 成 图 


用 户 新 鲜 度 ( 3 个 月 ) 日 活路 用户 中 ，30 天 前 新 增 用 户 占 比 较 高 ， 用 户 对 产品 的 新 鲜 度 保持 较 高 


Da-03 02-15 D2-22 03-01 03-08 03-15 03-22 03-29 04-05 04-12 04-19 04-25 05-03 


高 质量 用 户 中 ， 老 用 户 占 比较 大 ， 而 新 增 用 户 留 存 率 也 较 高 ， 可见 : 维系 老 用 户 ， 加 强 新 用 户 引 导 极为 重要 
8447 用户 新 鲜 度 


从 数据 中 ， 我 们 得 到 了 用 户 的 基础 画像 和 行为 习惯 ， 并 且 可 以 模拟 出 “用 户 的 一 天 ”的 使 用 场景 。 基 于 用 户 画 像 和 场景 ， 清 
楚 地 将 一 个 有 血 有 肉 、 活 灵活 现 的 目标 用 户 展 现在 我 们 眼前 ， 如 图 4-49 所 示 。 
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图 4-48 ”手机 迅雷 用 户 使 用 习惯 


基于 数据 ， 看 到 我 们 的 手雷 用 户 是 这 样 的 … 
使 用 习惯 


* 客户 端 获 取 渠 道 多 为 在 于 机 下 载 时 推荐 
* 对 搜索 f 住 确 性 ， 内 容 质 量 要 求 较 高 
о ЖЕ {КММ КЕЕН ИЕ 


平日 中 午 和 晚上 使 用 较 多 ; 周 未 早晚 使 用 


a 1 小 时 | 六 上 宇 用 时 间 使 用 率 高 ,碎片 化 时 间 使 用 较 少 


姓名 : 小 雷 
s 晚上 便 用 时 间 较 长 较 和 集中 


性 别 : 5 

s 家 里 ( Wifi ) 也 多 使 用 手机 上 网 、 看 视频 、 看 新 闻 、 玩 游戏 , 嫌 开 电脑 麻 炳 
星座 : ЕТЕ е р БЕТА, РР 39 一 会 于 机 再 睡 馆 

Шр =: 广州 


анга s 使 用 目的 性 较 强 ， 启动 直 榨 进入 下 载 中 心 或 搜索 


ЖТ: IT 汽车 游戏 电影 。 下载 完 直接 在 下 载 中 心 点 击 播放 观看 继续 观看 时 仍 去 下 载 中 心 点 击 播放 
看 网 易 Ві 
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图 4-49 ”手机 迅雷 用 户 画 像 


基于 用 户 的 特征 、 行 为 习惯 和 使 用 场景 ， 我 们 提出 了 针对 性 的 优化 点 (184-50) 及 相 匹 配 的 设计 方案 : 从 用 户 的 使 用 时 
间 段 数据 我 们 知道 ， 晚 上 10 点 钟 以 后 是 手机 迅雷 用 户 使 用 的 高 峰 时 段 ， 因 而 增加 了 夜间 模式 并 优化 了 视频 观看 模式 。 


数据 显示 ， 用 户 对 个 人 页 的 点 击 量 很 高 ， 但 停留 和 消费 并 不 多 ， 因 而 我 们 得 知 用 户 关 注 和 上 自身 相关 的 内 容 ， 但 目前 的 呈现 和 
用 户 预 期 匹配 度 较 低 ， 我 们 将 信息 架构 重新 梳理 ， 对 层级 较 深 和 且 用 户 点 击 率 较 高 的 内 容 做 了 部 分 曝光 ， 方 便 用 户 快速 使 用 ， 如 图 
4-51 所 泵 。 


Аай “以 用 尸 为 中 心 的 运 言 ”意识 


对 于 产品 来 说 ， 以 用 户 为 中 心 的 设计 (ОСО, User-centered Design) 非常 重要 ,但 随 着 产品 的 逐步 成 熟 ， 任 何 产 品 最 终 
都 将 进入 商业 化 ，UCD 不 足以 满足 商业 化 的 需要 。 因 而 ,我 们 进一步 提出 了 以 用 户 为 中 心 的 运营 (ОСО, User-centered 
Operation) 的 概念 。 在 进行 商业 化 运营 方案 设计 的 时 候 ， 需 要 考虑 策划 的 内 容 和 用 户 参 与 的 各 个 环节 的 关键 触 点 是 否 符 合用 户 
的 需求 和 使 用 场景 ， 最 终 的 设计 方案 也 会 随 之 应 运 而 生 。 对 于 商业 化 产品 的 设计 师 而 言 ， 需 要 具备 以 用 户 为 中 心 的 运营 的 思维 ， 
并 引导 运营 策划 以 用 尸 为 中 心 开 展 全 流程 的 运营 方案 设计 ， 进 一 步 实现 用 户 价 值 与 商业 价值 的 平衡 。 


优化 点 提取 


s 客户 端 获取 渠道 多 为 在 于 机 下 载 时 推荐 ”一 
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s 平日 中 午 和 晚上 使 用 较 多 ; 周末 早 暗 使 用 一 一 一 一 一 一 一 一 一 一 一 一 "推广 和 更 新 内 容 ， 新 版 本 等 在 用 户 使 用 集中 时 间 段 发 布 


ж 1 小 时 以 上 率 闲 时 间 使 用 牵 高， 碎片 化 时 间 使 用 科 消 一 一 一 一 一 一 一 一 一 一 一 ， 用 户 对 产品 的 认 知 和 定位 较 明 确 ， 同 时 也 相对 固化 


* ЧЕНЕ ЕН ЕЕЕ 一 — | >+ = 可 增加 夜间 浏览 及 视频 观看 模式 


ә 家 里 ( Wifi ) 也 多 便 用 手机 上 网 、 看 视频 、 看 新 闻 ， 玩 游 戏 ， 嫌 开 电 脑 府 烦 一 一 一 * 手机 APP 用 户 市 场 空间 极 大 ; 内 容 资源 优化 ， 精 准 营 销 


s 晚上 睦 觉 前 ,一 定 会 悄 在 床上 看 一 会 于 机 月 睡觉 一 ”je {їз т. МАЛ: 在 线 播放 或 下 载 播放 入 口 设计 优化 


a 使 用 目的 性 樟 提 ,局 动 让 控 进 入 下 载 中心 或 搜索 —— 多 为 者 用 户 , 加 强 新 用 户 功能 引导 ， 提 高昌 仓 府 


• 下 载 完 直接 在 下 载 中 心 点 击 播 放 观 看 ， 继续 观看 时 仍 去 下 载 中 心 点 击 播放 一 — «Ф 
。 会 多 次 启动 客户 映 查 看 正在 下 载 内 容 的 进度 “一 一 一 一 一 一 一 一 一 一 一 一 也 。 下 载 速度 可 感知 、 下 载 进度 可 视 化 优化 
* 习惯 了 免费 的 资源 获取 ， 但 愿意 在 更 好 的 特权 和 资源 的 基础 上 成 为 付费 会 员 ”一 一 一 > + 会 员 特权 推广 


图 4-50 “手机 迅雷 优化 点 提取 


现 有 方案 优化 方案 
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图 4-51 手机 迅雷 一 一 个 人 页 优化 思路 


5. 培 养 数据 敏感 度 


大 数据 时 代 ， 数 据 挖掘 和 数据 分 析 成 为 新 一 轮 的 热潮 ， 作 为 互联 网 行业 的 设计 师 ， 也 需要 时 刻 保持 对 产品 数据 的 敏感 度 和 敏 
锅 度 ， 首 先 要 关注 数据 ， 其 次 要 看 得 慌 数 据 ， 表 次 要 可 以 从 数据 中 友 现 问题 和 忆 结 经 验 。 前 面 提 到 的 GSM 数 据 模型 能 有 效 地 帮 


助 设计 师 找到 可 以 验证 设计 效果 的 数据 点 ， 接 下 来 当 数 据 有 了 实际 的 反馈 后 ， 除 了 基本 的 指标 提升 和 下 降 外 ， 还 需要 设计 师 从 数 
据 中 有 现 规律 ， 观 察 和 了 解 用 户 ， 并 从 中 洞察 到 问题 以 及 可 以 优化 的 看 力 氮 ， 为 下 一 步 的 夫 代 提供 依据 和 目标 。 


例如 ， 在 手机 迅雷 中 为 了 实现 会 员 用 己 的 转化 ， 我 们 尝试 了 很 多 种 引导 方式 ， 在 下 载 场景 中 提示 会 员 用 户 下 载 可 提速 ,在 功 
能 列表 中 引导 用 户 试 用 特权 等 ， 将 商业 目的 融入 到 用 户 的 使 用 场景 中 ， 转 化 效果 比较 明显 ， 文 付 成 功率 也 得 到 了 提升 ， 但 是 我 们 
发 现 “ 开 通 会 员 ” 按 钮 的 点 击 量 有 了 大 幅度 的 增长 ， 而 实际 的 支付 成 功率 的 提升 却 并 没有 表现 出 同比 例 的 大 幅 增 长 ， 为 什么 会 
这 样 的 数据 表现 呢 ? 接 下 来 我 们 把 用 户 从 点 击 支 付 按钮 到 最 终 完成 支付 的 每 一 个 触 点 及 其 转化 率 逐 一 拿 出 来 观察 和 分 析 。 


结果 友 现 : 第 一 ， 已 登录 用 户 的 文 付 成 功率 要 高 于 未 登录 用 户 ， 第 二 ， 未 登录 用 尸 中 ， 氮 击 支 付 按钮 进入 登录 界面 的 跳出 率 
要 远 高 于 后 续 其 他 支付 步骤 的 跳出 率 ， 也 束 是 说 登录 界面 在 用 户 支 付 流程 中 给 用 户 造 成 了 一 定 的 门槛 ; 第 三 ， 当 用 户 完 成 了 登录 
操作 后 ， 后 续 文 付 步骤 的 转化 率 趋 于 稳定 。 因 此 ， 我 们 把 问题 定位 在 登录 页 面 上 ， 针 对 未 登录 用 户 ， 将 文 付 页 面前 置 ， 登 录 页 面 
后 置 ， 降 低 操作 | 门槛， 因而 卡 在 登录 页 面 的 这 一 部 分 用 户 被 召唤 了 回来 ， 整 体 的 会 员 转 化 率 又 有 了 进一步 的 提升 ， 如 图 4-52 所 
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图 4-52 手机 迅雷 登录 界面 后 置 流 程 优化 


在 平衡 商业 价值 与 用 户 价 值 的 设计 之 路 上 ， 我 们 不 断 探 寻 各 种 方法 和 理论 ， 在 实践 中 得 以 应 用 ， 通 过 数据 验证 方法 的 有 效 性 
并 反复 总 结 ， 在 感性 设计 中 融入 了 诸多 理性 的 元 素 ， 因 为 我 们 知道 在 实现 产品 商业 价值 的 过 程 中 ， 必 定 会 经 历 商 业 与 用 户 的 矛 
盾 、 主 观 因素 的 干扰 等 ， 最 终 呈 现 给 用 户 的 内 容 如 何平 衡 矛 慎 、 避 免 干扰 ， 设 计 师 需 要 借助 客观 的 方法 和 数据 ， 不 断 地 目 我 提 
升 ， 内 外 兼 修 ， 才 能 让 设计 之 路 走 得 更 远 、 更 视 。 


第 5 章 ，” 通 同 创 新 之 路 


51 ”探索 创新 之 路 


创新 与 哲学 有 些 相似 (如 图 5-1 所 示 ) ， 两 者 看 起 来 都 很 高 深 ， 好 像 都 需要 灵感 。 实 际 上 ， 哲 学 源 于 哲学 家 们 对 生活 的 观察 
和 研究 ， 然 后 进行 高 度 概括 和 忌 结 ， 哲 学 家 们 大 多 都 是 普通 特 姓 ， 只 是 他 们 把 更 多 的 时 | 间 用 在 了 思考 根源 问题 上 。 我 们 是 否 可 以 
效仿 哲学 的 诞生 过 程 ， 整 理 出 一 套 创 新 的 方法 论 呢 ? 


y Es ant] SR 
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图 5-1 创新 与 哲学 的 相似 性 ， 可 以 有 所 借鉴 


我 们 可 以 了 解 到 ， 哲 学 是 对 普遍 的 和 基本 的 问题 进行 研究 ， 这 些 问题 通常 和 和 存在、 知识、 价值、 理性、 心灵 、 语 言 等 有 关 。 
其 批判 的 方式 通常 是 系统 化 的 方法 ， 并 且 以 理性 论证 为 基础 。 对 于 创新 而 言 ， 普 遍 的 和 基本 的 问题 是 互联 网 用 尸 的 普遍 需求 ， 而 
存 住 、 知 识 、 价 值 、 理 性 、 心 灵 、 语 言 等 则 是 需求 涉及 的 领域 。 一 个 项 目的 好 与 坏 通 常 需 要 一 套数 据 来 支撑 ， 这 也 丈 是 哲学 的 以 
理性 论证 为 基础 的 系统 化 方法 。 


可 参考 的 对 象 有 了 ， 那 么 该 如 何 去 形 成 万 法 论 呢 ? 提 人 到 和 哲学， 之 无 疑问 会 想起 哲学 三 大 终极 问题 : 


我 是 谁 ? 
我 从 哪里 来 ? 


我 要 到 哪里 去 ? 


这 三 个 问题 可 以 理解 为 “认识 你 目 己 ”， 而 我 们 需要 的 创新 是 不 是 可 以 理解 为 “认识 需求 的 本 身 ”? 因为 创新 离开 了 实用 
性 ， 是 坚 无 价值 可 言 的 。 瓯 像 科 学 家 合成 了 新 粒子 ， 如 果 不 去 应 用 ， 融 永远 只 是 他 在 于 历史 中 。 只 有 彻 撒 认识 了 需求 本 身 ， 才 能 
为 我 们 所 用 ， 从 而 激 友 出 无 限 的 创意 我 们 的 创新 之 路 的 和 牙 形 如 图 ?-2 所 示 。 


图 5-2 探索 创新 之 路 锥 形 
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5.1 ”探索 创新 之 路 


创新 与 哲学 有 些 相似 (如 图 5-1 所 示 ) ， 两 者 看 起 来 都 很 高 深 ， 好 像 都 需要 灵感 。 实 际 上 ， 哲 学 源 于 哲学 家 们 对 生活 的 观察 
和 研究 ， 然 后 进行 高 度 概括 和 忌 结 ， 哲 学 家 们 大 多 都 是 普通 特 姓 ， 只 是 他 们 把 更 多 的 时 | 间 用 在 了 思考 根源 问题 上 。 我 们 是 否 可 以 


效仿 哲学 的 诞生 过 程 ， 整 理 出 一 套 创 新 的 方法 论 呢 ? 
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图 5-1 创新 与 哲学 的 相似 性 ， 可 以 有 所 借鉴 


我 们 可 以 了 解 到 ， 哲 学 是 对 普遍 的 和 基本 的 问题 进行 研究 ， 这 些 问题 通常 和 和 存在、 知识、 价值、 理性、 心灵 、 语 言 等 有 关 。 
其 批判 的 方式 通常 是 系统 化 的 方法 ， 并 且 以 理性 论证 为 基础 。 对 于 创新 而 言 ， 普 遍 的 和 基本 的 问题 是 互联 网 用 尸 的 普遍 需求 ， 而 
存 住 、 和 知识、 价值、 理性、 心灵、 语言 等 则 是 需求 涉及 的 领域 。 一 个 项 目的 好 与 坏 通 党 需要 一 套数 据 来 支撑 ， 这 也 丈 是 哲学 的 以 
理性 论证 为 基础 的 系统 化 方法 。 


可 参考 的 对 象 有 有 了， 那么 该 如 何 去 形成 方法 论 呢 ? 提 人 到 和 哲学， 之 无 疑问 会 想起 哲学 三 大 终极 问题 : 
我 是 谁 ? 

我 从 哪里 来 ? 

我 要 到 哪里 去 ? 


这 三 个 问题 可 以 理解 为 “认识 你 目 己 ”， 而 我 们 需要 的 创新 是 不 是 可 以 理解 为 “认识 需求 的 本 身 ”? 因为 创新 离开 了 实用 
性 ， 是 毫 无 价值 可 言 的 。 束 像 科学 家 合成 了 新 粒子 ， 如 果 不 去 应 用 ， 萄 永远 只 是 存在 于 历史 中 。 只 有 彻底 认识 了 需求 本 身 ， 才 能 
为 我 们 所 用 ， 从 而 激 友 出 无 限 的 创意 我 们 的 创新 之 路 的 牙 形 如 图 ?-2 所 示 。 


图 5-2 ”探索 创新 之 路 锥 形 


5.2 ”思考 创新 对 象 


特 先 ， 我 们 需要 明确 一 点 一 “创新 的 主体 ”。 正 如 上 文 所 说， 创新 离开 了 实用 性 是 室 无 价值 可 言 的 。 换 名 话说， 创新 是 
有 对 象 依 赖 性 的 。 是 针对 一 个 问题 的 解决 方案 创新 ， 还 是 一 件 传 统 物 品 的 创新 ? 离开 了 具体 对 象 束 谈 不 了 创新 ， 因 为 学 围 太 广 
了 ， 会 让 人 无 从 下 手 ， 也 无 从 对 比 是 否 达到 了 创新 的 要 求 ， 所 以 创新 是 建立 在 具体 事物 上 的 。 


认识 对 象 背 景 是 开始 创新 的 第 一 步 ， 市 场 调 查 报告 首先 要 写 市 场 背 景 ， 项 目 可 行 性 报告 第 一 条 也 是 项 目 背 景 。 背 景 究竟 是 什 
导 背 景 是 一 个 很 虚 的 词 ， 不 了 解 的 人 往往 会 无 从 下 手 ， 更 有 甚 者 如 果 理 解 错 背景 ， 在 第 一 步 时 束 走 错 了 万 同 ， 导 致 
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整个 结论 不 可 行 ， 浪 费时 间 也 浪费 金钱 . 


上 文 提 到 了 哲学 的 三 大 问题 ， 也 适合 于 创新 问题 。 我 们 需要 确立 一 个 创新 的 目标 对 象 一 比如 我 们 目前 在 探索 团队 创新 建 
设 ， 结 合 例子 来 看 如 何 解决 问题 。 


案例 : 团队 创新 建设 


1. 我 是 谁 ? (团队 的 构成 要 素 ) 


我 们 看 到 主题 是 “团队 ”， 要 分 析 团 队 的 背景 ， 可 以 换 成 分 析 团 队 的 构成 要 素 。 团 队 有 公认 的 5 大 构成 要 素 ， 称 为 SP， 即 目 
标 (Ригроѕе) . À (People) 、 团 队 的 定位 (Place) 、 许 可 权 (Power) 、 计 划 (Plan) 。 这 样 我 们 就 从 一 个 词 分 解 出 了 5 
个 实质 性 的 小 标题 了 。 


2. 我 来 目 哪 里 (构成 要 素 的 定义 ) 


弄 清 了 背景 的 构成 要 素 后 ， 之 无 疑问 ， 还 要 去 弄 清 它们 的 定义 。 只 有 这 样 我 们 才能 够 有 参照 标准 ， 找 出 目前 我 们 需要 面 对 的 


团队 构成 要 素 的 定义 如 下 ( 见 图 5-3) : 


= 


Purpose 


5P 
团队 构成 
五 大 要 素 


图 5-3 团队 构成 五 大 要 素 


Вж: 团队 应 该 有 一 个 既定 的 目标 ， 为 团队 成 员 寻 航 ， 知 道 要 向 何 处 去 。 没 有 目标 这 个 困 队 就 没有 存在 的 价值 。 


А: 人 是 构成 团队 的 最 核心 力量 。 目 标 是 通过 人 来 实现 的 ， 所 以 人 员 的 选择 非常 重要 ， 要 考虑 人 员 的 能 力 、 技 能 是 否 互 
补 ， 以 及 经 验 。 
' 团队 的 定位 : 团队 在 发 展 过 程 中 处 于 什么 位 置 ， 各 成 员 在 团队 中 扮演 什么 角色 ? 


. 许可 权 : 团队 中 领导 人 的 权利 大 小 与 团队 的 发 展 阶段 相关 ， 一 般 来 说 ， 团 队 越 成 熟 领导 者 所 拥有 的 权利 相应 越 小 ， 在 团队 


发 展 的 初期 阶段 ， 领 导 权 是 相对 比较 集中 的 。 
“ 计划 : 目标 最 终 的 实现 ， 需 要 一 系列 具体 的 行动 方案 ， 可 以 把 计划 理解 成 目标 的 具体 工作 的 流程 。 
根据 以 上 定义 ， 我 们 来 进行 目 我 解剖 。 
对 目 我 的 团队 背景 分 析 如 下 ( 见 图 5-4) : 
Вж: 团队 没有 既定 目标 ， 包 括 短 期 目标 和 长 期 目标 。 
А: 团队 成 员工 作 内 容 独 立 ， 没 有 协同 工作 经 验 。 
“ 团队 定位 : 团队 定位 为 设计 与 开发 的 纽带 ， 依 赖 于 工作 性 质 的 定位 。 
` 许可 权 : 团队 在 组 织 中 属于 技术 型 业务 ， 决 定 权 小 。 


. 计划 : 工作 计划 依赖 于 上 游 设计 需求 。 


ЈЕ? 我 来 自 哪 里 ? 


图 5-4 对 象 背 景 分 析 步 又 
我 们 能 看 到 ， 组 内 的 团队 现状 与 标准 之 间 还 有 一 段 很 长 的 路 要 走 。 相 信 大 家 也 能 够 了 解 ， 为 什么 认识 背景 是 开始 创新 的 第 一 
步 了 吧 。 对 背景 足够 了 解 能 够 让 我 们 更 清楚 地 找到 我 们 所 面临 的 问题 ， 从 而 做 出 相应 的 改变 与 创新 。 
3. 我 要 到 哪里 去 ? (期 待 怎样 的 改变 ) 


到 了 第 二 步 ， 团 队 的 背景 束 算 分 析 宛 了 ， 有 了 可 参考 的 标准 ， 找 到 了 目前 的 问题 ， 我 们 何不 多 想 一 步 ， 访 如何 去 寻求 改变 ? 
很 多 人 以 为 找到 了 问题 束 目 然而 然 找 到 了 解决 万 案 。 其 实 不 然 ， 缺 乏 执行 力 往 往 是 很 多 创新 虎 头 蛇 尾 的 直接 原因 。 因 此 ， 我 们 需 


要 把 问题 的 达成 目标 写 下 来 ， 照 着 达成 目标 去 做 ， 才 能 保证 我 们 的 方向 不 误 。 


但 目标 并 不 是 扣 脑 门 随便 定 的 ， 我 们 需要 一 些 辅助 方法 来 得 到 最 优 方案 ， 所 以 创新 的 旅程 我 们 还 要 继续 往 下 走 。 我 们 继续 用 
哲学 三 大 问题 来 探索 创新 之 路 。 


5.3 ” 拉 巧 加 成 创新 


头脑 风暴 也 称 为 创造 能 力 的 集体 训练 法 ， 是 无 限制 的 目 由 联想 和 讨论 的 代名词 ， 其 目的 在 于 产生 新 观念 或 激 友 创新 设想 。 这 
一 摘 述 与 我 们 的 创新 意识 相 吻 合 ， 创 新 需要 灵感 ， 而 头脑 风暴 给 创新 提供 了 一 种 可 循 的 方法 。 


在 我 们 平时 的 工作 中 ， 很 多 决策 是 在 会 议 中 进行 的 。 由 Leader 主 持 会 议 议 题 ， 让 团队 成 员 进行 讨论 ， 这 种 看 似 公 平和 民主 
的 会 议 ， 实 则 多 多 少 少 会 受到 群体 思维 的 影响 一 一 在 群体 决策 中 ， 由 于 群体 成 员 心 理 相 互 作用 影响 ， 易 届 于 权威 或 大 多 数 人 的 
意见 ， 形 成 所 谓 的 “群体 思维 ”。 和 群体 思维 削弱 了 群体 的 批判 精神 和 创造 力 ， 损 害 了 决策 的 质量 。 赵 是 有 创造 力 的 想法 ， 赵 是 看 
起 来 对 团队 不 利 ， 因 此 也 不 难看 到 ， 即 使 是 有 个 性 的 团队 成 员 ， 碍 于 一 些 个 人 利益 ， 在 表达 措辞 上 也 会 稍 加 其 酌 或 部 分 妥协 ， 最 
后 想法 并 不 能 得 到 很 好 的 实施 或 者 得 不 到 想 要 的 效果 。 


因此 ， 为 了 保证 群体 决策 的 创造 性 ， 提 高 决策 质量 ， 管 理学 上 发 展 出 一 系列 改善 群体 决策 的 方法 ， 头 脑 风 暴 法 是 较为 典型 的 
一 种 方法 。 

头脑 风暴 法 是 由 美国 创造 学 家 A.F. 奥 斯 本 于 1939 年 首次 提出 、1953 年 正式 发 表 的 一 种 激发 思维 的 方法 。 此 方法 经 各 国 创 造 
学 研究 者 的 实践 和 发 展 ， 至 今 已 成 为 相对 成 熟 的 技法 ， 具 体 流程 可 以 参照 维基 百科 “brainstorming” 的 释义 。 许 多 实践 经 验 表 
明 ， 头 脑 风 暴 法 可 以 排除 折 中 方案 ， 对 所 讨论 问题 通过 客观 、 连 续 的 分 析 ， 找 到 一 组 切实 可 行 的 方案 ， 因 而 头脑 风暴 法 在 军事 决 
策 和 民用 决策 中 得 到 了 较 广 泛 的 应 用 。 


当然 ， 头 脑 风 暴 法 实施 的 成 本 (时 间 、 费 用 等 ) 是 很 高 的 ， 另 外 ， 头 脑 风 暴 法 要 求 参 与 者 有 较 好 的 素质 。 这 些 因素 会 影响 头 
脑 风暴 法 实施 的 效果 。 


目前 ,头脑 风 暴 在 国内 很 多 团队 的 实际 应 用 过 程 中 流程 被 简化 了 ， 相 较 于 传统 会 议 模 式 ， 还 是 换 汤 不 换 药 。 因 此 ， 在 实施 头 
脑 风 暴 时 一 定 要 擎 握 会 议 流程 ， 不 要 触 辜 雷 区 ， 以 免 降低 会 议 质 量 。 


5-5 人 ~ 图 5-12 所 示 是 我 们 分 析出 的 目前 团队 所 面临 的 问题 以 及 团队 进行 头脑 风暴 会 议 时 的 流程 PPT。 


会 议 目标 


SL Ex xe 倾听 、 汇 聚 、 提 炼 各 位 同事 工作 中 
遇 到 的 难题 
关于 重 构 团队 创新 建设 探讨 жиш Оне 
技术 团队 ， 更 高 效 的 工作 输出 ， 更 
和 | 谐 的 合作 氛围 


95-5 ”准备 工具 & 会 前 动员 


会 前 准备 
你 认为 当前 工件 
思考 目前 自己 以 及 团队 协作 问 骂 待 а 作 中 
шш 亟待 解决 的 问题 是 
思考 上 自己 理想 的 团队 框架 


图 5-6 ”会 前 准备 & 抛 出 问题 


任 每 条 占 题 上 备注 原因 БЕР аА Е 


图 5-7 Jr 2 3 


你 希望 的 重 构 框架 


个 人 阐述 是 怎么 样 的 ? 


图 5-8 ”个 人 阐述 & 抛 出 问题 


图 5-10 ”头脑 风暴 现场 


个 人 情绪 
易 受 影响 从 而 
影响 工作 质量 


需求 时 间 
;没有 标准 


Ее ВЕЈЈЯ 
LE 800) 


工作 结果 
无 反馈 机 制 


党 有 及 时 
工作 总结 


5-11 脑 暴 第 一 轮 ， 整 理 输出 问题 清单 


准备 工具 : 空 日 A4 纸 和 笔 。 


动员 : 调动 与 会 者 积极 性 ,希望 与 会 者 能 够 开始 在 头脑 里 构思 idea。 


工作 职责 
个 明确 


КН 


相同 功能 
ЖУ 1 ЕЕ 


与 合作 方 的 沟通 制定 相应 规范 
mus a 参与 开发 招聘 


设计 稿 规 范 
建立 工作 规 光 浏览 器 支持 标准 
| I ИШЕ, 建立 文件 库 

制定 UI 框架 


创新 工作 方式 
增强 团队 合作 创意 小 组 轮 岗 制 
团队 成 员 自我 提升 


МЕЧЕ 


制定 工作 效率 可 量化 标准 需求 时 间 排 期 


写 师 负责 跟 进 


及 时 进行 工作 总 结 项 目 重 构 规范 


项 目 经 验 分 享 


订立 重 构 职责 
问题 反馈 渠道 
培养 职业 素养 


图 5-12 ”根据 脑 暴 第 二 问 结 论 归纳 ， 结 合 问题 清单 ， 输 出 大 致 解决 方案 
会 前 准备 : 先 展 出 脑 暴 内 容 ， 如 果 对 问题 没有 一 定 认 识 ， 会 拉 低 头脑 风暴 的 结果 质量 。 


抛 出 问题 : 把 答案 写 在 A4 纸 上 ， 每 条 问题 得 到 的 答案 不 少 于 50 条 ， 每 个 人 必须 写 出 的 答案 视 与 会 人 数 而 定 。 例 如 : 10 个 人 


汇 整 答 案 : 把 答案 汇集 起 来 ， 列 出 不 同 的 答案 ， 统 计 每 条 答案 出 现 的 次 数 ， 进 行 权重 排名 。 如 文字 太 长 可 进行 概括 ， 需 问题 
Теш, ЮБИ нле, 


个 人 阐述: 每 个 人 对 目 己 的 回答 进行 前 述 ， 确 定 对 问题 有 清晰 的 认识 ， 防 止 造 竿 充 数 。Leader 也 能 更 深入 了 解 与 会 者 的 想 
法 。 


抛 出 问题 : 进入 新 一 轮 问题 的 脑 暴 ， 依 然 需 要 进行 答案 的 整理 和 个 人 前 述 ， 重 复 图 ?-6 中 所 示 的 步骤 。 
归纳 总 结 : 把 每 个 idea 归 纳 起 来 ， 每 个 idea 都 可 以 是 下 一 次 脑 暴 的 主题 ， 层 层 细 分 ， 直 到 得 到 最 佳 结果 为 止 。 


会 议 总 结 : 完善 每 一 个 不 足 的 地 方 ， 以 期 提高 下 次 会 议 质量 。 


脑 暴 结束 后 ， 需 要 迅速 地 对 所 得 到 的 问题 进行 整理 分 析 和 输出 ， 如 图 5-14 所 示 ， 保 证 在 团队 成 员 对 会 议 的 内 容 还 保有 一 个 
具体 印象 的 时 间 内 让 大 家 看 到 脑 暴 结果 ， 从 而 增加 认同 感 ， 并 对 下 次 的 脑 暴 会 议 有 所 期 待 。 对 任何 事情 来 说 ， 好 奇 都 是 一 股 很 好 
的 推动 力 。 


如 果 你 有 机 会 参与 头脑 风暴 ， 你 会 听 到 很 多 令 人 惊艳 的 想法 ， 也 有 很 多 也 许 你 不 眉 一 顾 的 回答 ， 但 在 听 完 提出 者 的 前 述 之 
后 ， 丈 会 对 某 一 个 固有 认识 产生 站 覆 。 这 就 是 脑 暴 的 魅力 一 一 灵感 的 激荡 。 


襄 了 这 么 多 ， 想 要 表达 的 无 非 是 ,创新 除了 依赖 灵感 ， 同 时 也 需要 方法 的 支撑 。 从 图 5-11 所 示 不 难看 出 ， 头 脑 风 暴 可 以 汇 
集 无 数 人 ， 给 出 无 限 可 能 的 灵感 ， 但 具有 创造 性 的 想法 往往 隐 蕊 得 比较 深 ， 我 们 还 需要 学 会 辨别 。 


54 = Г/Л ЛЧ 


КЕНЧ, ээ ЖОНУ ИМУ A AXZ 75 z АША ТАНУ АЛЛ Зе, БЕВ адаја ЛАУ, АЕА 
大 众 最 重视 的 问题 只 是 一 条 弟 规 的 路 ， 解 决 脑 暴 出 来 的 权重 排名 第 10、 第 20 条 、 第 30 条 的 问题 ， 在 方法 和 领域 上 才 有 更 多 的 可 
能 性 。 


541 ， 重 置 闲置 资源 一 赚钱 宝 在 共享 经 济 中 “智慧 生活 / 


目 1984 年 马丁 . 魏 次 曼 的 《共享 经 济 》 一 书 出 版 以 来 ，30 年 间 ， 我 们 时 弟 听 到 各 种 有 关 共 享 经 济 的 讨论 ， 可 是 我 们 真 的 理解 


共享 经 济 吗 ? 


2 М 


5х, БВА 9189 рег, ШЕ ану, ЖҮН ИБ he, ГЕЈЕ АЕЗЕТАЈЕ АД. 
其 实 ， 共 享 经 济 早 已 渗透 到 我 们 生活 的 各 个 方面 ， 比 如 享誉 全 球 的 Airbnb， 作 为 短 租 共享 经 济 的 创造 者 ， 市 值 已 超过 酒店 业 巨 
58; 成 立 于 2010 年 的 Eatwith， 把 全 球 美 食 打 造成 了 共享 饮食 的 新 模式 ;还 有 车 名 的 在 线 医疗 Medicast， 利 用 医 患 双 方 的 
私人 时 间 ， 创 造 新 的 共享 医疗 价值 。 


在 国内 ， 也 有 很 多 共享 经 济 的 倡导 者 ， 比 如 分 答 ， 丈 是 典型 的 知识 共享 模型 。 在 科技 领域 ， 则 有 迅雷 赚钱 宇 ， 利 用 智能 硬件 
作为 载体 ， 共 享 市 宽 存 储 和 计算 资源 ， 并 由 此 众生 了 无 限 节 点 的 星 域 CDN。 


分 析 这 些 共享 经 济 的 案例 ， 我 们 友 现 所 有 成 功 的 共享 经 济 ， 都 具有 类 似 的 属性 : 私有 | 闲置 的 资源 ， 互 助 互利 的 思想 ， 产 生 额 
外 的 经 济 效益 ， 当 然 ， 还 需要 足够 的 扩 术 能 力 来 实现 。 迅 雷 赚钱 宝 ， 正 是 满足 了 这 些 条 件 的 一 个 智能 硬件 ，2016 年 8 月 迅雷 旗下 


子 公司 网 心 科技 宣布 赚钱 宝 升级 为 共享 经 济 智能 平台 ， 这 将 是 怎样 一 个 共享 经 济 的 进化 之 路 ? 


2013 年 ， 迅 雷 CEO 邹 胜 龙 注 意 到 一 个 现象 ， 家庭 市 营 越 来 越 大 ， 但 是 大 部 分 人 在 家 里 上 网 的 时 间 少 之 又 少 ， 大 部 分 宽 市 都 
日 日 浪费 了 。 同 时 为 了 满足 用 户 对 于 网 速 的 追求 ， 企 业 还 在 大 量 建造 数据 中 心 ， 这 是 一 种 双 同 浪费 。 如 果农 庭 的 空 闪 市 宽 也 能 共 
享 ， 既 能 解决 普通 家 庭 的 宫 市 瀛 费 问 题 ， 收 集 起 来 的 宽 市 还 能 为 社会 创造 价值 。 


束 是 在 这 种 背景 下 ， 网 心 科 反 于 2014 年 1 月 局 动 了 水 晶 计划 ， 该 计划 包 合 了 迅雷 赚钱 宇和 星 域 CDN 两 个 项 目 。 在 经 过 一 年 


多 的 内 部 讨论 和 产品 选 型 过 后 ， 网 心 科 技 最 终 没有 选择 打造 一 天 会 赚钱 的 路 由 器 ， 而 是 做 了 一 个 独特 的 智能 硬件 ， 也 融 是 今天 的 
迅雷 赚钱 玉 。 对 个 人 来 说 ， 迅 雷 赚钱 宝 是 世界 首 蒜 能 赚钱 的 智能 硬件 ， 用 户 分 享 自 己 的 空闲 市 宽 即 可 获得 收益 。 对 网 心 科技 来 
说， 迅雷 赚钱 宝 是 一 个 布局 在 普通 人 家 里 的 微型 服务 器 ， 为 旗下 另 一 产品 线 星 域 CDN 提 供 了 更 低 成 本 、 更 快 传输 计算 的 能 力 。 
对 社会 来 吕 ， 迅 雷 赚 钱 宝 解决 了 大 型 机 房 消 耗资 源 多 的 问题 。 


网 心 科技 以 迅雷 赚钱 军 为 基础 切 步 构建 了 共享 经 济 云 计算 模式 ， 目 标 是 把 闲置 的 市 宽 资 源 、 计 算 人 资源、 人 存储 资源 全 部 连接 在 
一 起 ， 然 后 提供 给 需要 的 人 。 


3. 创 新 思路 


什么 是 智慧 生活 ”很 多 报道 都 描绘 了 这 样 一 副 场景 : 开车 时 能 在 后 视 镜 收发 信息 ， 开 会 时 可 以 实现 无 纸 局 效 会 议 ， 照 镜子 能 
实时 更 换 多 种 造型 ， 冰 箱 门 可 以 显示 食物 是 否 新 鲜 ， 下 班 的 时 候 可 以 提前 打开 空调 .….. 总 的 来 说 ， 智 慧生 活 就 是 利用 创新 技术 ， 
打造 智能 化 、 人 性 化 、 更 便利 的 生活 服务 。 


不 仅 如 此 ， 目 前 智慧 生活 已 经 升级 为 “智慧 城市 ”， 人 们 相信 ,信息 技 术 在 未 来 几 年 可 能 会 给 城市 友 展 市 来 惊人 变化 。 随 着 
智能 技术 友 展 ， 未 来 起 市 的 关键 基础 设施 通过 组 成 服务 ， 会 使 城市 的 服务 更 有 效 ， 为 市 民 提 供 人 与 社会 、 人 与 人 的 和 谐 共 处 ,成 
为 智慧 城市 。 
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生活 已 是 大 势 所 趋 ， 但 整体 趋势 之 下 ， 何 种 产品 才 是 真正 的 智能 硬件 ， 才 能 真正 受 欢 迎 ， 仍 然 是 一 个 值得 思考 的 问题 。 


4. 灵 感 搜集 


Uber、 滴 涌 打 和 车 和 Airbnbi 上 汽车 和 房屋 成 为 人 们 最 熟悉 、 最 容易 理解 的 共享 经 济 ， 但 其 实 共享 经 济 的 范围 要 广阔 得 多 。 人 在 
中 国 ， 万 众 创业 的 热情 和 资本 的 青睐 正 让 共享 经 济 突破 音 见 的 住 行 领 域 ， 在 更 多 领域 内 与 更 多 普通 人 走 得 更 近 。 网 心 科技 运用 智 
能 硬件 “迅雷 赚钱 室 ”， 滨 试 让 共享 经 济 走 进 每 个 中 国 普通 家 庭 的 客厅 ， 并 为 这 些 家 庭 市 来 回报 。 


除了 继承 了 迅雷 十 余年 国内 领先 的 云 加 速 技 术 、 云 计算 部 署 能 力 之 外 ， 网 心 科技 独创 了 多 项 创新 技术 。 


迅雷 赚钱 宝 ， 它 与 客厅 里 的 路 由 器 连接 ， 每 个 普通 家 庭 都 可 在 不 影响 正常 网 络 使 用 的 同时 ， 将 平时 处 于 闲置 状态 的 市 冤 高 效 
收集 并 处 理 后 ， 再 提供 给 互联 网 企业 使 用 。 


5. 最 终 方 
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从 目前 已 有 的 经 验 和 教训 来 看 ， 市 场 对 空 炒 概念 却 缺乏 实际 功用 的 产品 并 不 买单 ， 各 种 形形色色 的 智能 硬件 给 人 留 下 的 第 一 
印象 残 是 长 得 都 差不多 。 从 外 观 来 看 ， 手 环 、 手 表 陈 的 智能 硬件 很 多 ， 从 具体 功能 来 看 ， 都 在 做 运动 计数 、 健 康 监 测 乙 类 的 功 
能 ， 整 体 来 看 呈现 出 严重 的 同 质 化 .。 


实际 上 ， 这 种 同 质 化 竞争 正 是 当前 智能 硬件 市 场 诸多 问题 的 源头 。 而 迅雷 赚钱 宝 则 避 开 了 这 些 弟 见 的 智能 硬件 领 敬 ， 从 一 开 
始 残 脐 准 一 个 独特 的 功能 : 收集 用 尸 家 中 空 闪 的 市 完 、 存 储 和 计算 资源 ， 提 供给 有 需要 的 企业 ， 然 后 再 返还 相应 的 收入 给 用 户 。 
这 种 用 共享 经 济 理 念 打 造 出 的 服务 ， 此 前 市 面 上 从 未 出 现 过 ， 所 以 一 推出 ， 残 收获 了 众多 眼球 和 追捧 。 


迅雷 赚钱 宝 用 共享 经 济 的 理念 打造 出 独 有 的 功能 ， 从 而 形成 深度 的 磊 异 化 竞争 。 网 心 科技 的 强大 创新 能 力 ， 形 成 了 最 坚实 的 
苋 争 壁 鞋 ， 人 至 今 在 赚钱 类 智能 硬件 领域 ,迅雷 赚 钱 宝 仍 然 独 树 一 帜 ， 人 至 今 仍 无 同类 产品 。 这 束 是 这 款 产 品 能 在 一 年 多 时 间 里 收获 
500 万 粉丝 的 基础 。 


此 外 ， 迅 雷 赚 钱 宝 的 用 户 还 能 够 通过 插件 的 方式 使 用 下 载 宝 等 功能 ， 享 受 数 据 共享 、 效 据 备份 、 多 端 影音 体验 等 诸多 功能 。 


这 意味 着 迅雷 赚钱 宝 将 告别 过 去 单纯 的 资源 再 利用 模式 ， 广 大 用 户 将 由 此 更 深入 地 参与 共享 云 计算 ,获得 更 为 广泛 的 价值 反馈 。 


6. 作 值 体 现 


(1) 真正 实现 身 着 能 赚钱 的 梦想 


用 尸 家 中 的 市 宽 绝 大 部 分 处 于 闲置 状态 ， 搜 集 用 户 空 闪 市 宽 并 产生 收 葵 .….. 这 不 是 未 来 科技 ， 迅 雷 赚钱 宝 可 轻松 实现 ， 通 过 
循环 利用 ， 通 过 水 晶 回 报 用 户 〈10000 水 晶 =1 元 人 民 币 ) ， 如 图 5-13 


Ap 


迅雷 独特 的 P2sP 拉 术 ， 对 用 户 家 中 闲置 的 市 宽 进 行 收集 ， 
所 示 。 


迅雷 赚钱 宝 
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95-13 ”迅雷 赚钱 宝 截 至 2015 年 11 月 的 相关 数据 
(2) 与 几 十 万 玩 客 一 起 完成 2 亿 元 “情怀 ”账单 


截至 2015 年 11 月 ， 迅 雷 赚钱 宝 为 全 社会 古 约 了 价值 2 亿 元 的 空 内 市 完 资 源 ， 在 全 国 布 建 30 万 个 节 上 操 ， 为 国家 书 省 下 800 万 度 
电 ， 相 当 于 为 一 个 特 万 人 口 起 市 减 排 6700 吨 二 氧化 碳 。 在 这 份 账单 的 最 前 面 ， 迅 雷 赚钱 宝 打 出 了 一 句 口号 : 致 有 想法 、 敢 行动 
的 玩 客 们 。 这 里 的 玩 客 指 的 正 是 迅雷 赚钱 宝 的 五 百 多 万 粉丝 们 。 迅 雷 将 其 称 为 “ 玩 客 ”， 一 扣 即 合 ， 携 手 完 成 了 这 张 颇具 “ 情 


怀 ” 的 2 亿 元 年 度 节约 账单 。 
如 果 对 2015 年 的 迅雷 赚钱 至 再 做 一 个 盘点 ， 妈 现 它 拿 下 了 诸多 颇具 分 量 的 业内 奖项 ， 这 些 交 项 大 都 据 向 “创新 ”二 字 。 业 
内 闸 有 人 指出 ， 正 是 通过 由 外 至 内 的 创新 ， 迅 雷 赚 钱 宝 得 以 成 为 今年 最 炙手可热 的 智能 硬件 。 
在 外 部 模式 上 ， 迅 雷 赚钱 宝 可 称 得 上 是 敢 想 敢 为 ， 大 胆 地 将 近 两 年 新 兴 的 共享 经 济 模式 首次 引入 了 智能 硬件 和 云 计算 领域 。 
不 同 于 传统 的 费时 费力 增 建 IDC 机 房 的 万 法 ， 网 心 科 技 通 过 赚钱 宝 ， 可 发 起 无 数 个 人 家 庭 用 户 共享 出 总 量 远 远 局 于 骨干 网 的 市 宽 
市 客 需 求 ，“ 用 环保 、 高 效 的 共享 模式 做 云 计算 将 是 未 来 趋势 ”， 网 心 科技 CEQO、 


容量 ， 以 真正 满足 互联 网 新 时 期 高 速 增长 的 市 宽 需 
迅雷 联席 CEO 陈 厌 称 。 


5.4.2， 快 岛 一 准确 把 握 用 户 需求 


网 络 通信 和 服务 一 直 是 由 网 络 运 言 商 和 直接 销售 给 最 终 用 户 ， 中 国电 信 、 中 国 移动 、 中 国联 通 、 中 国 广电 四 大 网 络 巨 头 几乎 本 断 
策略 ,但 用 户 心 里 普遍 有 一 个 准则 : “一 分 钱 一 


了 整个 网 络 运 营 商 行业 。 虽 然 有 几 家 小 公司 在 夹 颖 中 求生 ， 实 行 薄 利多 销 的 经 营 
。 由 于 可 供 选 择 的 运营 商 丰 多， 因此， 用 尸 已 经 对 各 家 运营 商 所 提供 的 民 著 不 齐 的 网 络 信 号 质量 习以为常 ， 并 归 答 于 上 自己 
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购买 了 “价格 低廉 ”的 网 络 套 餐 ， 而 没有 过 多 地 去 要 求 网 络 运 营 商 提高 网 络 服务 质量 。 
终 新 用 尸 虽然 对 如 今 的 网 络 现 状 不 满 ( 见 图 5-14) ， 但 对 网 络 运 宫 商 固有 的 不 加 奇 责 的 思维 使 得 用 户 并 没有 意识 到 目 己 可 


以 拥有 更 好 的 网 络 使 用 体验 。 


2. 预 期 目标 
迅雷 作为 “快速 下 载 ” 的 代名词 被 用 户 铭记 ， 在 网 络 加 速 的 专业 领域 上 有 一 种 强烈 的 使 命 感 。 因 此 “ 快 鸟 ”项 目 应 运 而 生 ， 


虽 在 “在 网 络 加 速 的 专业 领域 上 ， 不 断 挖掘 ， 并 / 佳 确 把 握 用 户 时 刻 变 化 的 需求 ”。 


图 5-14 ”如 今 的 网 络 压力 越 来 越 大 


3. 一 般 方 案 


源 于 全 球 电信 监管 的 反 垄 断 浪潮 ， 在 二 十 世纪 九 十 年 代 出 现 了 一 种 新 的 业务 模式 一 一 “移动 虚拟 网 络 运 营 商 模式 ” ( 见 图 
5-15) ， 实 质 是 移动 通信 服务 由 移动 网 络 运 营 商 批 友 给 虚拟 运营 商 后 ， 由 其 重新 包 兴 成 目 有 品牌 并 销售 给 最 终 用 尸 。 虚 拟 运营 
商 企 运 豆 中 会 更 注重 客户 群 、 品 牌 以 及 分 销 渠 道 ， 因 此 消费 者 的 和 福利 有 了 很 大 的 提升 ， 包 括 在 网 络 使 用 体验 上 。 
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图 5-15 3665525245 E 8 Jb 238 Р 


近年 来 ， 虚 拟 网 络 运 营 商 在 全 球 移动 通信 市 场 的 份额 稳定 在 2% 左 右 ， 并 呈现 出 稳步 上 升 的 趋势 。 但 这 一 模式 在 国内 而 言 ， 
还 是 新 生 婴 儿 。 因 为 国家 在 通信 管理 万 面相 当 严 格 ， 只 有 拥有 信息 产业 部 颁 友 的 运营 牌照 的 公司 才能 架设 网 络 。 这 样 一 来 ， 完 全 
是 运营 商 控制 了 与 终端 用 户 的 天 系 ， 虚 拟 网 络 运 膏 商 模式 依然 是 座 不 可 党 登 的 高 峰 。 
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.灵感 搜集 


在 此 情况 下 ， 迅 雷 是 否 有 可 能 帮助 提升 广大 用 户 的 网 络 使 用 体验 呢 ? 纵 观 市 场 上 现 有 产品 ， 并 无 可 参照 和 和 对比 的 竞 品 ， 所 以 
快 乌 项 目 组 在 迅雷 客户 痛 友 起 用 户 调研 ， 虽 在 了 解 新 的 网 络 环境 下 用 户 真 正 的 需求 。 经 过 调研 友 现 ， 广 大 用 尸 除了 不 满足 于 当前 
的 网 络 运 营 商 模式 外 ， 对 网 络 速 度 也 有 了 新 的 要 求 一 一 不 骨 满 足 于 单纯 的 下 载 功能 ， 而 是 希望 享受 更 多 的 在 线 内 容 。 


为 了 改变 这 种 现状 ， 项 目 组 需要 重新 去 分 析 用 户 需求 ， 重 新 定义 “ 谁 ” 人 在 “什么 环境 下 ” 想 要 解决 “什么 问题 ”。 人 在 这 种 变 
化 乙 中 ， 目 标 用 户 已 经 从 原来 的 “下 载 用 户 ” 黑 默 转型 为 “上 网 用 户 ”， 需 求 也 从 “下 载 快 ”转变 为 “无 阻碍 的 上 网 ”，“ 无 阻 
碍 的 上 网 ”有 可 能 是 在 下 载 文件 ， 也 有 可 能 是 在 看 视频 ， 还 有 可 能 是 在 玩 游戏 ， 如 图 ?5-16 所 示 。 无 论 是 哪 一 种 需求 ， 都 可 以 归 
结 于 “便捷 快速 的 上 网 ”。 这 时 ， 如 何 去 满 足 用 尸 在 上 网 时 有 快捷 的 网 速成 为 了 我 们 新 的 产品 目标 。 


下 载 


图 5-16 ”网 络 发 展 前 后 用 户 需求 的 变化 


一 直 以 来 ， 了 迅雷 有 一 项 特色 功能 一 一 迅雷 会 员 的 “高 速 通 道 ” 广 受 好 评 ， 但 其 不 足 之 处 是 只 能 针对 下 载 文 件 进 行 加 速 。 针 
对 用 户 新 的 需求 ， 项 目 组 必须 在 现 有 产品 的 基础 上 进行 突破 与 创新 ， 不 再 固守 于 当前 的 成 绩 ， 一 味 地 停留 在 提高 下 载 网 速 上 ， 而 
是 追 蹊 到 用 户 需求 的 上 游 ， 将 看 力 点 放 人 在 用 户 的 整个 “市 宽 ” 上 一 提升 够 市， 而 非 下 载 网 速 。 对 用 户 的 “市 宽 ” 进 行 加 速 ， 
这 是 所 有 竞 品 包 括 迅雷 自己 想 都 未 曾 想 过 的 事情 ， 一 直 以 来 这 都 是 电信 和 与 联通 等 运 宫 商 在 做 的 事情 ， 但 是 在 新 的 需求 下 ， 产 品 应 


遵循 实际 情况 去 做 自己 力所能及 的 改变 ， 才 能 做 出 新 的 产品 。 快 鸟 ， 便 在 此 情况 下 诞生 了 。 
6. 最 终 方案 


在 用 户 新 需求 的 推动 下 ， 项 目 组 与 电信 、 联 通 等 运营 商 合作 ， 通 过 技术 手段 ， 用 增加 用 户 物理 市 宽 的 方式 提高 用 户 的 网 速 
用 户 家 中 的 市 完 ， 可 以 比 作 是 流 着 水 的 水 管 ， 当 用 户 家 中 的 “水 管 ” 比 较 窜 的 时 候 ， 水 流 再 大 都 会 受制 于 当前 水 管 的 直径 。 但 
是 ， 如 果 把 水 绾 的 横 截 面 拓宽 ， 同 样 的 条 件 下 ， 流 水 开会 变 多 。 具 体 来 说 ， 当 用 尸 家 中 的 市 客 为 83M 时 ， 速 度 最 大 值 可 能 维持 在 
1M/s。 但 是 ， 如 果 通 过 使 用 快 鸟 提速 ， 使 市 宽 提 升 到 20M， 网 速球 会 达到 2.5M/s， 这 样 用 己 无 论 是 在 线 观看 视频 、 游 戏 还 是 购 
物 ， 都 能 享受 带宽 加 速 和 流量 提升 的 服务 。 


当下 的 产品 使 用 环境 干 变 万 化 ， 在 产品 设计 中 ， 只 有 及 时 把 握 用 户 需 求 才能 迎合 市 场 需求 的 变化 ， 在 为 公司 提供 商业 价值 的 
同时 ， 为 用 尸 提供 更 多 的 使 用 价值 。 


方案 不 断 精 进 一 一 准确 把 握 用 户 时 刻 变 化 的 需求 。 


项 目 成 立 后 ,一 直 在 不 断 完善 产品 。 产 品 正 式 运 营 半 年 后 积 囚 了 很 大 一 批 用 户 ， 但 由 于 其 本 身 工具 的 属性 ， 用 户 的 使 用 频率 
较 低 ， 未 开通 会 员 的 用 户 长 时 间 不 使 用 后 逐渐 沦 为 沉默 用 户 ， 但 快 乌 每 天 会 有 大 量 的 试用 机 会 给 用 户 ， 如 何 唤醒 沉默 用 户 对 产品 
进行 试用 ， 成 为 提升 产品 使 用 率 的 一 个 关键 问题 。 在 对 “ 现 有 的 唤醒 方式 是 否 可 行 ” 进 行 调研 后 ， 我 们 把 用 户 反 馈 的 问题 归纳 为 
如 下 几 个 场景 : 


"АЙЛ: 每 天 开机 时 启动 ， 告 诉 我 快 鸟 可 以 提速 ， 我 是 偶尔 需要 ， 不 是 每 天 者 需要， 而 且 在 我 一 开机 的 时 候 提 醒 我 ， 我 只 
会 将 它 和 其 他 的 弹 窗 一 起 关 掉 。 


ВАР: 我 见 到 右 下 角 的 弹 窗 的 第 一 反应 就 是 : 广告 ! 01 
с: 其 实 这 个 功能 提 好 的 ， 我 只 是 希望 它 能 在 我 网 速 不 好 的 时 候 出 现 ， 不 用 在 我 试用 完了 再 出 现 一 次 。 
ОДР: 每 天 出 现 的 弹 窗 ， 内 容 一 堆 ， 谁 会 静 下 来 认真 地 看 上 面 写 的 哈 ? X E! 


在 闫 品 需 求 的 挖 扬中 ， 通 过 分 析 现 有 的 问题 ， 倒 推出 严 品 需求 ， 也 是 一 种 常用 的 方法。 通过 这 些 用 户 的 有 反馈， 我 们 可 以 友 现 
现在 的 方案 中 有 如 下 间 题 : 


弹 窗 广告 性 质 太 强 ， 容 易 引 起 用 户 反感 。 

` 提示 用 户 的 频率 和 方式 不 符合 用 户 的 使 用 场景 。 

“ 提示 信息 过 于 复杂 。 

根据 以 上 三 点 ， 我 们 调整 了 唤醒 用 户 万 式 的 设计 万 向 ， 如 图 5-17 所 示 。 


如 何 将 现 有 的 免费 试用 信息 简化 后 包 闪 成 用 尸 可 接受 的 万 式 ， 成 为 接 下 来 设计 的 重 中 之 重 。 项 目 组 开始 关注 电脑 屏幕 上 各 处 
的 位 置 ， 在 哪里 提示 用 户 才 不 会 有 反感? 无 论 是 Windows 的 右 下 角 弹 窗 ， 还 是 Mac 的 右上 和 角 弹 窗 ， 这 两 种 方式 都 是 系统 的 党 用 方 
陈 ， 用 户 对 这 样 的 方式 已 经 有 一 定 的 认 知 ， 会 将 这 些 内 容 默 认为 “广告 ”， 如 果 再 从 这 上 面 下 功夫 ， 很 难 获 得 想 要 的 结果 ， 于 
是 ， 所 有 人 的 目光 开始 转向 系统 底部 的 操作 栏 。 


存在 问题 设计 方向 


大 三 jd 


提示 复杂 


图 5-17 ”分 析 现 有 问题 倒 推 设计 方向 


文 是 一 次 大 胆 的 尝试 ， 将 产品 信息 全 部 呈现 于 系统 底部 ， 不 仪 文案 需要 简化 再 简 化 ， 同 时 产品 在 不 同 场 景 下 的 各 种 提示 、 异 
党 处 理 ， 对 于 新 方案 来 说 都 是 一 个 很 大 的 挑战 ! 但 是 挑战 与 机 会 并 仔 ， 我 们 一 直 致 力 于 为 用 户 打造 展 好 的 体验 ， 可 是 什么 样 的 体 
验 才 算 是 好 的 体验 呢 ? 我 们 知道 ,一 个 好 的 体验 应 该 符合 人 的 日 弟 社 交心 理 ， 作 为 一 个 程序 或 者 产品 经 理 ， 在 与 “人 ”打交道 时 
不 应 该 过 多 地 “ 问 问题 ”， 特 别 是 在 一 些 不 合适 的 时 机 ， 即 使 需要 询问 用 户 ， 也 不 宜 将 用 户 售 留 在 界面 过 长 时 间 。 在 新 的 方案 设 
计 中 ， 将 产品 信息 包 妆 成 系统 内 容 呈 现 给 用 户 ， 是 一 种 最 轻便 、 最 不 会 打扰 用 尸 ， 也 不 会 引起 用 户 反 感 的 提醒 方式 。 


找到 了 合适 的 位 置 对 用 户 进 行 提 醒 后 ， 接 下 来 要 解决 的 问题 是 如 何在 有 限 的 位 置 下 呈现 多 变 的 流程 信息 以 及 异 党 情况 。 


首先 进行 信息 简化 : 原 有 弹 窗 中 的 “段落 式 ” 的 内 容 要 精简 为 “10 字 ”以 内 ， 如 图 5-18 所 示 。 


您 获得 次 免费 提速 机 会 
宽带 可 从 20M 提 升 至 50M 


РАС Ж100М 


5-18 ” 弹 窗 界面 设计 


在 简化 信息 的 基础 上 ， 将 产品 的 整个 流程 在 规定 的 “十 字 展 示 区 ”呈现 ， 最 终 方案 如 图 5-19 所 示 。 


备注 : 简化 信息 在 任务 栏 提 示 状 态 
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5-19 ”PC 端 信息 前 置 设计 方案 


Ба: “用 尸体 验 的 创新 ( 微 创 新 ) 是 决定 互联 网 应 用 能 否 受 欢迎 的 关键 因素 ”。 短 创新 需要 我 们 以 用 尸 为 中 心 ， 将 
目 己 置身 于 产品 真实 的 使 用 环境 中 ， 去 感受 用 户 在 受到 提醒 时 深 深 的 厌恶 感 ， 去 感受 用 户 需 求 ， 从 而 抓 住 用 户 真 正 的 痛 点 ， 完 成 


设计 方案 。 


从 计算 机 的 友 明 到 智能 手机 的 普及 ， 我 们 的 生活 走 来 越 离 不 开 虚 拟 世 界 ， 而 真实 一 直 是 人 类 的 人 退 求 。 所 以 ， 人 类 一 直 在 虚拟 
中 不 断 接近 真实 ， 电 影 从 2D 到 3D 的 转变 ， 平 面 投影 到 全 息 投 影 ，VR 这 一 行业 也 不 断 在 发 展 。2016 年 ，VR 行 业 取 得 了 不 错 的 成 
绩 : Oculus 和 HTC Vive 开 始 向 消费 者 供 货 、 谷 歌 宣布 了 其 Daydream 项 目 ， 这 一 系列 的 成 果 似 乎 都 表明 VR 时 代 悄 然 来 临 。 


然而 ， 由 于 开 友 成 本 局 、 内 容 单 薄 、 呈 现形 式 单 一 等 种 种 原因 ，VR 的 音 及 遇 到 了 意 想 不 到 的 阻碍 ， 各 大 VR 三 商都 有 目 己 的 
硬件 和 软件 ， 但 是 几乎 所 有 系统 都 会 有 浏览 器 ， 通 过 浏览 器 可 以 使 开 友 者 用 非 单 小 的 成 本 融 能 兼容 几乎 所 有 VR 设 备 ， 其 中 包括 
手机 模拟 的 VR 设 备 ， 并 且 由 于 Web 目 身 具 有 不 需 安 疼 、 便 于 传播 、 便 于 快速 迭代 等 特点 ，WebVR 成 为 大 家 共同 研究 的 谍 题 。 


我 们 不 得 不 思考 这 样 一 个 问题 ，VR 逐 步 引 起 大 家 的 天 注 和 重视 ， 那 么 将 VR 体 验 引 入 到 我 们 的 产品 当中 ， 挟 试 做 一 个 类 似 的 
网 站 似乎 成 了 一 件 让 人 值得 期 待 的 事情 。 
2. 预 期 目标 


VR 博客 是 迅雷 公司 维护 的 一 个 关于 各 种 VR 前 沿 资 讯 的 网 站 ， 在 网 站 设计 上 ， 为 了 体现 VR 这 一 元 素 ， 我 们 需要 进行 革新 。 
VR 体 验 强 调用 户 沉 浸 感 ， 要 让 用 户 有 身 临 其 境 的 感觉 ， 所 以 在 设计 上 我 们 要 有 以 下 突破: 


` 页 面 布 局 要 打破 传统 的 规律 排列 ， 需 要 找到 一 种 新 的 布局 方式 ; 
` 页 面 效 果 上 要 市 来 视觉 上 的 冲击 ，; 
` 页 面 内 元 素 要 具有 立体 感 ，; 


` 页 面 支持 VR 设备 体验 。 


3. 传 统 万 案 


在 传统 的 网 页 布局 中 ( 见 图 5-20) ， 网 页 子 模块 一 般 是 纵向 排列 ， 模 块 与 模块 之 间 会 有 明显 的 间隔 ， 而 模块 里 的 内 容 则 限 
定 企 已 经 划分 好 的 起 形 区 块 乙 中 。 


页 向 标题 


95-20 ”传统 网 页 布局 


在 这 样 一 种 布局 方式 乙 下 ， 用 户 一 般 都 是 从 上 到 下 、 从 左 到 右 浏 览 ， 很 难 找到 一 种 能 让 用 户 拥 有 沉浸 了 式 体验 的 展现 万 式 ， 所 
以 我 们 需要 找到 一 条 新 的 出 路 。 


4. 创 新 思路 
WebVR 的 实现 基础 是 3D 网 页 ， 在 H5 技 术 已 经 相当 成 熟 的 今天 ，WebGL 得 到 普遍 支持 ，3D 网 页 的 实现 已 经 不 是 一 件 困难 的 
事情 。 


3D 网 页 ， 即 通过 在 计算 机 的 二 维 屏幕 上 运用 虚拟 3D 近 术 ， 让 网 页 元 素 产 生 远近 明暗 等 效果 ， 从 而 模仿 真实 世界 中 的 3D 距 离 
感 ， 给 人 以 身 临 其 卉 的 感 况 ， 让 用 户 可 以 像 在 现实 里 一 样 环视 整个 场景 。 而 3D 效 果 最 急 应 用 得 最 多 的 残 是 全 景 图 一 贞 ， 即 将 入 
个 平面 图 通过 各 目 平移 和 旋转 组 合成 一 个 立方 体 ， 将 观察 点 设 在 立 万 体 中 心 ， 然 后 呈现 到 屏幕 上 ， 用 户 通过 鼠标 操作 对 立方 体 进 
行 旋 转 ， 从 而 达到 模仿 真实 世界 中 观看 实景 的 效果 。 


全 景 图 一 多 的 视 党 效果 正 是 VR 体验 中 强调 的 用 尸 沉 浸 感 ， 所 以 我 们 将 这 种 展示 方式 和 网 页 结合 起 来 ， 将 平面 图 换 成 网 页 里 
的 子 模块 ， 这 样 ， 我 们 得 出 了 一 种 新 的 布局 方式 一 一 “网 页 全 景 化 ”， 如 图 5-21 所 示 。 


图 5-21 “全 景 化 ”网 页 布局 


“全 景 化 ”网 页 布局 将 网 页 子 模块 从 纵向 排列 变 为 横 同 排列 ， 并 将 首尾 相连 ， 形 成 一 个 环绕 的 闭环 ， 而 模块 与 模块 之 间 不 下 
人 存在 明显 的 界限 ， 它 们 甚至 可 以 是 连续 的 一 体 ， 在 这 样 的 条 件 之 下 ， 网 页 里 的 元 素 布 置 残 有 了 更 多 的 选择 ， 它 甚至 可 以 横 跨 于 模 
块 之 间 。 人 在 这 样 一 种 布局 方式 之 下 ， 我 们 看 到 了 更 多 的 可 能 性 。 于 是 ,我 们 的 VR 博客 首页 决定 采取 这 种 新 的 布局 方式 ,及 用 全 
景 化 来 处 理 ， 加 入 了 360 度 无 死角 的 自由 视野 ， 从 而 市 来 了 身 临 其 境 的 沉浸 感 。 


5. 灵 感 搜集 


在 确定 VR 博 客 的 布局 方式 之 后， 我 们 开始 思考 细节 的 处 理 方式 ， 当 时 正好 是 “ 双 11”,， 在 浏 遇 了 天 猫 的 “ 双 11” 宣 传 页 后 
了 我 们 有 了 新 的 思路 ， 如 图 5-22 所 示 。 


这 个 页 面 采 用 了 “一 镜 到 底 ” 的 效果 ， 通 过 拉 近 和 拉 远 镜头 让 用 户 念佛 在 立体 空间 中 穿梭 ， 市 来 了 震撼 的 视 帝 冲 击 ， 而 这 种 
勾 起 人 们 感官 刺激 的 体验 正 是 我 们 想 要 在 网 页 上 展示 的 VR 效果 。 于 是 ,我 们 在 VR 博客 的 背景 处 理 上 ， 尝 试 引入 这 一 新 的 元 素 。 
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95-22 天 猫 的 “ 双 11 宣传 页 


对 于 页 面 内 元 素 的 展示 ， 我 们 也 妾 试 了 多 种 效果 ， 后 来 借助 运用 样式 的 CSS3 变 换 属 性 ， 形 成 一 个 3D 球 体 ( 见 图 5-23)， т 
给 了 我 们 新 的 灵感 。 


图 5-23 CSS3 实 现 3D 球 体 


这 个 球体 是 由 n 个 平面 通过 各 目 平 移 旋转 而 得 ， 而 每 个 平面 是 一 个 圆 形 ， 在 此 基础 上 ， 我 们 将 圆 形 换 成 其 他 更 多 样 的 形状 之 
后 友 现 ， 会 得 到 各 种 我 们 意 想 不 到 的 立体 元 素 。 此 外 ， 我 们 将 每 个 面 的 自转 速度 和 旋转 角度 作 了 不 一 样 的 调整 之 后 ， 也 得 人 天 了 各 
种 不 一 样 的 展示 效果 ， 我 们 需要 的 就 是 这 种 立体 感 。 设 想 球面 里 是 个 页 面 ， 而 你 就 在 球体 内 部 中 心 位 置 浏览 页 面 。 


6. 最 终 方 


М 


经 过 大 量 的 前 期 准备 ， 接 下 来 就 是 把 一 块 块 碎片 逐一 拼接 起 来 成 为 一 个 完整 的 网 站 。 
(1) 构建 3D 场 景 ， 搭 建 网 页 的 基本 框架 


VR 博客 首页 在 布局 上 打破 一 贯 的 传统 展示 方式 ， 及 用 网 页 全 景 化 来 处 理 ( 见 图 5-24) 。 首 页 共有 四 个 子 模块 ， 分 别 
=: “前 页 、“VR 体 验 ”、“ 硬 件 人 资讯 ”和 “游戏 /影视 ”。 所 以 ,我 们 及 用 四 面 柱 体 作为 网 页 的 基本 架构 ， 将 每 个 模块 分 别 
进行 平移 和 旋转 来 形成 一 个 闭合 的 四 面 柱 体 。 
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95-24 ”博客 网 页 全 景 化 
用 户 可 以 通过 鼠标 对 四 面 柱 体 进 行 旋 转 来 浏览 各 个 子 模块 ， 这 些 步骤 都 可 以 借助 强大 的 3D5 引 警 Three.Js 来 轻松 完成 。 
(2) 细 化 每 个 子 模块 ， 用 立体 元 素 进 行 填充 


子 模块 的 构建 与 平常 的 网 页 无 异 ， 而 在 模块 内 的 元 素 构 建 上 ， 我 们 需要 别出心裁 。 除 了 给 首页 模块 配 图 行 用 的 是 雷 鸟 形状 
外 ， 在 “VR 体验 ”、“ 硬 件 资 讯 和 “游戏 /影视 ”这 三 个 模块 内 ,选用 了 图 5-25 所 示 的 三 种 形状 作为 立体 元 素 的 基 元 。 


/ ОМ 
N 


我 们 通过 CSs3 的 变换 功能 ， 将 n 个 平面 形状 进行 各 目 旋 转 ， 最 后 产生 出 三 种 不 同 效果 的 立体 元 素 ， 并 将 其 添加 到 相应 模块 
上 ， 如 图 5-26 所 示 。 


95-25 ” 子 模 块 元 素 


由 VR 体 验 
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5-26 “ 子 模块 元 素 展示 
(3) 背景 特殊 处 理 ， 为 网 页 锦上添花 


在 网 页 背景 上 ， 我 们 引入 了 星空 这 一 元 素 ， 如 图 5-27 所 示 。 首 先 ， 我们 玉 用 四 张 星 空 图 片 ， 分 别 作为 四 面 柱 体 每 个 平面 的 
育 景 ， 给 网 页 葛 定 一 个 星空 的 基调 。 除 此 之 外 ， 为 了 呈现 出 “一 镜 到 底 ” 的 立体 空间 穿梭 感 ， 我 们 决定 及 用 星星 粒子 的 效果 ， 让 
星星 粒子 不 断 从 远 到 近 进 行 穿 梭 ， 由 屏幕 中 心 不 断 往 屏 幕 四 边 行 ， 市 来 震撼 的 视 总 冲击 。 


(4) 后 期 页 面 整合 


为 网 站 内 容 添加 上 一 些 其 他 基本 元 素 (如 LOGO、 提 示 信 息 等 ) 之 后 ，VR 博 客 的 首页 内 容 部 分 已 基本 完成 ， 博 客 首 页 效果 
如 图 5-28 所 示 。 


此 时 浏览 页 面 需 要 鼠标 左右 操作 才能 体验 全 景 效果 ， 要 通过 VR 设 备 浏览 ， 我 们 为 此 给 页 面 增加 了 一 个 VR 模 式 ( 见 图 5- 
29) 。 只 需要 在 项 目 中 ，3 引 入 webvr-polyfilljs， 它 可 以 基于 普通 浏览 器 实现 WebVR АРІ 1.0 功 能 ， 然 后 引入 VRControls.jSs、 
VREffect.js 两 个 脚本 库 。 
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图 5-28 博客 首页 效果 
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95-29 ”博客 首页 VR 模式 


VRControlsjjs 能 让 用 户 以 第 一 人 称 置 于 场景 中 ， 为 了 与 用 户 产 生 适 当 的 交互 ， 需 要 获取 设备 的 状态 信息 (如 手机 的 旋转 倾 
е) 并 作用 到 场景 当中 。 


VREffectjs 负 责 分 屏 ， 为 让 体验 者 有 更 深 的 沉浸 感 ， 通 单 会 根据 用 户 瞳 距 将 屏幕 分 割 成 具有 一 定 视 差 的 两 部 分 ， 束 是 把 屏幕 
显示 切割 为 左 眼 和 右 眼 所 视 的 屏幕 ， 利 用 人 的 双眼 立体 视 澡 让 屏幕 中 的 内 容 看 上 去 有 立体 化 的 效果 。 


用 最 具 性 价 比 的 手机 VR 金子 设备 即 可 体验 效果 ， 通 过 手机 访问 页 面 并 将 手机 放 入 VR 盒子 中 ， 这 时 来 体验 一 下 完全 不 一 样 的 


感受 吧 。 


虽然 影响 VR 体验 效果 的 因素 有 许多 ，VR 在 软 硬 件 、 内 容 体 验方 面 还 有 很 多 改善 空间 ， 并 且 WebVR 仍 处 于 W3C 的 草案 阶 


段 ， 但 并 不 影响 我 们 利用 现 有 的 技术 来 创造 。 随 着 技术 的 友 展 这 些 也 将 都 不 是 问题 ， 做 这 个 网 站 也 是 一 种 尝试 。 创 新 的 路 上 没有 
捷径 可 走 ， 只 有 通过 不 断 的 尝试 和 摸索 ， 才 能 逐步 找 出 那 条 可 以 让 我 们 继续 走 下 去 的 道路 。 


544 ”心理 建设 一 一 想 人 所 想 


环视 各 大 公司 的 招聘 官网， 无 不 是 以 功能 型 为 主 ， 一味 以 老板 或 业务 部 门 的 需求 为 主 ， 像 公告 榜 一 样张 贴 着 人 事 招 聘 内 容 。 
但 渐渐 的 ， 求 职 人 才 的 数量 出 现 了 下 降 的 趋 扩 ，HR 们 陷入 了 又 昧 又 被 抱怨 的 尴 众 境地 。 


2. 预 期 目标 
把 迅雷 招聘 官网 打造 成 能 够 吸引 更 多 高 素质 人 才 ， 同 时 能 够 推动 公司 业务 发 展 ， 兼 具 传播 企业 文化 的 专业 网 站 。 
3. 传 统 方案 


传统 的 招聘 网 站 ， 第 一 屏 基本 会 展示 各 种 “| want you” 的 轮 播 图 ， 吸 引 人 才 对 企业 产生 兴趣 ， 进 而 有 明显 的 搜索 框 ，3 引 
导 人 才 对 职位 进行 搜索 ， 再 放 上 最 新 最 热门 的 招聘 职位 列表 ， 甚 至 显眼 的 薪酬 ， 供 人 才 快 速 浏览 ， 如 图 5-30 所 示 。 
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5-30 ”传统 招聘 网 站 


如 果 像 运 言 网 站 一 样 去 经 豆 企 业 的 招聘 网 站 ， 那 主要 方向 残 开始 走 侦 了 。HR 的 工作 之 一 是 快速 为 各 个 空缺 职位 找到 恰当 的 
人 才 ， 用 运营 技巧 经 营 招聘 网 站 : 


:导致 冷门 却 又 急需 人 手 的 岗位 空缺 的 时 间 更 长 ; 
:求职 热门 职位 的 人 才 更 多 的 是 受到 高 薪 的 吸引 ， 容 易 导 致 尸 位 素 餐 的 现象 。 


5. 灵 感 搜 集 


大 部 分 招聘 网 站 在 建立 的 初期 是 从 企业 的 角度 出 发 ， 企 业 或 部 门 需要 什么 样 的 人 才 ， 把 这 种 需求 写成 文案 ， 做 成 Banner， 
用 尽 各 种 方法 去 展示 。 创 新 不 妨 用 逆向 思维 ， 从 人 才 的 角度 出 友 ， 他 们 的 需求 瓯 是 我 们 的 钧 子 ， 因 此 我 们 开始 进行 人 才 需 求 分 
йт: 


. 高 素质 的 合作 伙伴 : 真正 拥有 高 远志 向 的 人 才 ， 一 定 不 甘心 于 做 一 个 事务 型 的 员工 ， 更 项 望 成 为 一 名 战略 伙伴 型 的 职员 ， 
这 就 需要 良好 的 公司 职业 文化 寥 轩 ° 


CB TA): 有 追求 的 人 才 都 有 自己 的 职业 发 展 规划 ， 公 司 的 发 展 方向 是 他 们 看 重 的 一 个 因素 。 
: 合适 的 激励 : 公平 、 成 就 、 关 系 是 影响 激励 的 三 要 素 ， 倾 向 于 一 流 的 企业 必须 要 有 一 流 的 企业 文化 。 


看 重 以 上 三 点 要 求 的 人 才 ， 也 恰好 是 公司 需要 的 人 才 的 必 备 属性 ， 如 图 5-31 所 示 。 
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“ ”局 双 大 合作 伙伴 
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— 良好 的 发 展 渠道 


— 适当 的 油 励 — 


图 5-31 ”人才 与 企业 的 需求 相 匹配 


迅雷 招聘 官网 最 终 效 果 如 图 ?-32 所 示 。 


1) 抛弃 传统 的 功能 型 招聘 网 站 方案 ， 转 型 成 战略 伙伴 型 的 企业 宣传 网 站 ， 整 个 网 站 以 展示 企业 文化 为 主 ( 见 图 5-33) ， 结 
合 人 才 需 求 的 三 点 要 求 ， 让 浏 哆 网 站 的 精 严 们 产生 共鸣 ， 进 而 产生 想 进 入 这 家 企业 工作 的 想法 ， 利 用 公司 里 面 的 典型 事件 、 上 典型 
人 物 来 塑造 企业 的 文化 氛围 ( 见 图 5-34) ， 要 知道 ，“ 榜 样 的 力量 是 无 穷 的 ”， 这 样 可 以 激 友 出 更 多 的 “典型 ”。 同 时 要 包 合 
工作 环境 和 福利 待遇 等 介绍 ， 如 图 5-35 所 示 。 
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95-32 ”迅雷 招聘 官网 效果 图 


what you think is what you talk， 直截了当 地 表达 是 最 有 效 的 沟通 ， 无 论 是 
你 对 于 事物 对 错 的 看 法 ， 还 是 具体 的 实施 建议 


十) 自我 管理 


简单 做 人 ， 积 极 做 事 


中 数据 导向 
应 对 “海量 ”和 “实时 ”， 从 无 限 可 能 的 维度 组 合 里 找到 有 效 的 数据 ， 并 理解 
产品 的 商业 模式 和 用 户 的 行为 模式 
(+) 技术 创新 


迅雷 率先 并 创新 地 实现 了 P2SP 技 术 ， 建 六 了 超过 60 亿 条 的 全 球 最 大 的 进 制 文 
件 索 引 库 ， 关 吸引 了 超过 3 亿 的 筷 联 网 用 户 使 用 找 们 的 产品 


95-33 ”迅雷 企业 文化 及 发 展 方向 


Bolt 界 面 引 警 发 明 人 


@ 2010 年 荣获 授 守 网 癌 首 席 工 程 师 亲朋 称号 


ОЮЛ ПАЛАН, ВОЗ [ ЕЕН A. , АЧ. Fi ашта Windows 
音 记 请 产 后 部 基于 BO 用 辣 引 等 开 六， 业 弄 有 起 过 100 计 公司 使 用 该 3| 芝 开发 上 月 口 的 产 
品 。 刘 咎 障 参 与 便 订 了 迅雷 太 量 的 桂林 规范 ， 是 号 联 网 二 载 .图 低 钼 理 等 客 个 领域 的 产 
ВАНИЕ, ШЕРИГ Еол ЗАЧЕТ А, НБА Е РУ 


DCDN 重 要 奠基 人 


必 2014 年 荣获 巨 诗 网络 首席 工程 师 荣 党 称号 


2013 年 加 入 迅雷 , DCDN 刘 要 况 基 作 。 届 从 鹤 诅 汗 团 队 ,根据 大 规 杠 分 布 式 理 客 收 进 
РР 技术 架构 , 还 用 数据 疗 析 与 控 气 技术 结 癌 学 林产 业 窜 点 展 方向 打造 出 欢笑 云 计算 
的 蔷 市 性 产品 一 一 DCDN , ЖШ ГИ РАЕН ЕЕ, ОСОМНЧН ЕНИН АНД 
可 蒂 来 了 非常 种 要 的 技术 动力 和 商业 前 景 ; ФЕС тА Го АНЕТА. 


图 5-34 高 素质 的 合作 伙伴 


2) 留 出 职位 搜索 渠道 和 入 口 ， 从 交互 上 进行 合理 的 引导 ， 如 图 ?-36 所 示 。 


3) 配 上 符合 企业 形象 的 科技 感 设计 ， 无 形 中 在 浏览 者 脑海 中 塑造 了 企业 高 大 上 的 形象 。 
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图 5-35 ”工作 环境 与 薪酬 福利 等 激励 制度 
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图 5-36 ”充满 科技 感 的 设计 与 动 效 ， 明 显 又 不 突 元 的 职位 搜索 入 口 


此 次 招聘 官网 的 重大 转型 ， 其 成 功 不 仪 体现 为 求职 人 数 明 显 上 升 ( 见 图 5-37) ， 而 且 提 高 了 招聘 人 才 的 质量 ， 更 重要 的 是 
提升 了 迅雷 的 企业 形象 。 这 个 创新 又 一 次 验证 了 少数 派 与 逆向 思维 的 有 效 性 ， 也 更 加 验证 了 现代 社会 心理 战术 的 重要 性 。 
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95-37 ”新 官网 上 线 后 各 项 重要 数据 均 有 显著 上 升 


5.4.5” 极 客 的 创意 一 一 重 构 设 计 用 代码 男 男 
1. 创 意 背 景 


互联 网 急速 友 展 的 时 代 ， 用 尸 已 经 离 不 开 移动 互联 网 的 陪伴 。 移 动 互 联网 最 天 键 的 一 个 因素 是 沅 量 ， 内 容 为 王 的 意识 渐渐 成 
为 主流 ， 界 面 的 视 完 设计 更 多 的 是 辅助 作用 ， 简 洁 风 盛行 。 用 户 对 流量 耗损 度 的 天 注 与 页 面 加 载 速 度 同样 重视 ， 为 了 给 用 户 更 好 
的 体验 ， 网 页 的 制作 再 也 不 是 以 前 的 “ 切 图 + 文字 ”的 制作 方式 了 ， 更 多 开始 注重 整体 的 优化 。 


2. 传 统 万 案 与 分 析 


移动 端的 优化 分 为 5 个 方面 ， 如 图 5-38 所 示 。 


图 5-38 移动 端 优化 策略 


加 载 方 面 已 经 有 很 多 成 熟 的 插件 与 应 用 ;脚本 和 样式 方面 也 有 成 熟 的 自动 化 工具 ; 泻 染 方面 更 多 靠 的 是 页 面 开发 者 对 浏览 
泻 染 原 理 熟悉 度 和 经 验 ;图片 方面 从 原始 图 片 的 应 用 ， 到 如 今 众多 压缩 工具 的 出 现 ， 主 要 在 于 图 片 文件 大 小 和 清晰 度 之 间 的 稀 


H 


随 着 网 页 技术 的 不 断 友 展 ， 图 片 内 容 的 展示 方式 有 着 更 多 的 技术 可 供 选 择 : 


· САМУАЅ: 进行 动画 交互 是 它 的 优势， 在 静态 图 片 的 利用 上 显得 大 材 小 用 ， 且 涉及 JS， 在 便捷 性 和 复 用 性 上 优势 不 大 ， 向 


后 兼容 性 不 佳 。 


. SVG: 在 静态 图 形 上 可 塑性 高 ， 复 用 性 强 ， 但 其 代码 门槛 也 相对 高 和 复杂 ， 其 组 合 形状 的 动画 交互 也 需要 使 用 S$， 又 增加 
了 一 个 文件 的 引入 ， 其 至 插件 的 引入 ， 只 为 了 使 用 其 中 一 个 功能 ， 造 成 代码 的 宛 余 。 


由 此 看 来 ， 图 片 方面 有 更 多 的 空间 可 以 下 手 。 


3. 灵 感 搜集 


在 图 片 压缩 拉 术 已 经 相当 成 熟 的 今天 ， 是 否 可 以 换个 方向 去 思考 ， 如 果 我 们 用 其 他 东西 蔡 代 图 片 呢 ? 用 代码 替代 图 片 已 经 有 
一 定 的 尝试 了 ， 比 如 用 base64 技 术 去 蔡 换 图 片 ， 但 没有 规律 的 代码 维护 起 来 相当 不 易 。 例 如 ， 在 平时 的 项 目 中 经 弟 会 使 用 样式 
进行 小 圆 点 和 三 角形 的 仿 画 ， 赴 形 、 圆 角 更 是 不 在 话 下 ， 这 些 都 是 基本 的 几何 形状 ， 是 人 否 可 以 效仿 七 巧 板 的 组 合 原理 ， 对 基本 形 
状 进行 不 同 组 合 ， 得 到 数量 级 的 图 形变 化 ， 如 图 5-39 所 示 。 


全 


图 5-39 七巧板 的 无 限 可 能 


4. 创 意 应 用 


在 实际 工作 中 找 共 同 点 ， 首 先 想 到 的 是 纯色 系列 ， 图 形 简 单 的 icons， 与 七 三板 相似 ， 都 是 由 矩形 、 圆 形 、 多 边 形 互相 况 切 
蕉 加 的 变化 得 来 。 感 谢 技 术 的 友 展 和 极 人 简化 设计 的 流行 ， 应 用 样式 的 伪 元 素 就 能 男 出 一 个 由 图 5-40 所 示 三 个 基本 形状 组 成 的 简 
单 icon。 通 过 样式 的 命令 控制 ， 还 能 实现 瞬时 颜色 切换 功能 ， 加 上 CSS3 技 术 的 成 熟 ， 还 可 实现 icon 的 变形 动画 ( 见 图 5-41) , 
增强 交互 性 和 视 党 效果 。 


background:#F5AB15 


#388ECE #F5AB15 


图 5-40 ”基本 几何 图 形 组 成 icon& 简 单 命令 控制 实现 瞬时 磊 色 交换 


图 5-41 CSS3 轻 易 操 作 icon 的 变形 动画 
5. 应 用 数据 


使 用 CSS 代 码 绘 制图 片 ， 对 程序 员 来 说 是 一 种 挑战 ， 但 从 实用 性 来 说 ， 可 减少 很 大 一 部 分 文件 体积 。 如 图 5-42 所 示 ， 左 侧 的 
一 张 充值 成 功 的 提示 图 片 ， 即 是 用 CSS 代 码 绘 制 的 。 在 某 项 目 中 ， 所 有 用 尸 操作 提示 图 片 均 用 CSS 代 码 绘 制 ， 最终 的 重 构 文件 大 
小 为 20KB， 而 采用 图 片 的 重 构 文件 大 小 则 有 44KB， 最 终 减 少 的 文件 大 小 达 ?0% 以 上 ， 如 图 ?-42 石 侧 图 所 示 。 
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图 5-42 ”用 样式 画图 ， 文 件 体积 大 小 减少 了 172 


用 CSs 代 码 绘制 图 片 ， 不 仅 可 减少 文件 体积 ， 提 高 加 载 速率 ， 更 可 灵活 控制 一 些微 小 的 动画 效果 。 如 图 ?-43 所 示 ， 这 是 
CSS 代 码 绘 制 的 简 划 版 雷 鸟 ， 原 理 是 把 五 官 分 组 绘制 再 组 合 ， 可 用 代码 轻松 地 操控 各 个 部 分 做 出 各 种 有 趣 的 动画 效果 。 由 于 静态 
书 的 局 限 ， 无 法 显示 动画 效果 ， 有 兴趣 的 读者 可 展开 想象 力 ， 目 己 尝 试 一 下 。 


图 5-43 ”用 样式 画 的 雷 鸟 ， 可 简单 操作 各 个 部 位 


用 代码 画 画 只 是 业余 时 间 的 一 种 近 能 探索 ， 对 于 未 知 的 探索 ， 绝 对 不 是 无 用 的 消 超 。 只 要 肉 入 了 对 的 齿轮 中 ， 丈 能 合理 地 运 
行 。 因 此 ， 拥 有 极 客 精神 也 是 连接 创新 之 路 的 一 座 桥 梁 。 


5.4.6 Ооп’ Ё repeat yourself 一 一 自动 化 工作 流 


人 类 社会 从 手工 作坊 跨 入 机 器 化 大 生产 时 代 后 ， 社 会 生产 效率 有 着 相当 大 的 提升 ， 并 在 不 断 地 改进 。 作 为 一 位 拉 术 人 员 或 者 
一 个 技术 团队 ， 可 以 说 ,效率 和 创意 是 最 为 重要 的 两 个 绩效 指标 。 虽 然 专 业 程序 员 只 是 近 几 十 年 才 诞 生 的 职业 ， 但 其 作业 方法 的 
演化 也 遵循 着 相同 的 道路 : 从 起 初 单纯 文本 工具 的 开 友 到 借助 集成 工具 ， 输 出 效率 的 提升 也 有 着 翻天 覆 地 的 变化 。 如 今 ， 编 程 开 
发 有 许多 便利 的 辅助 开 友 工具 可 供 使 用 ， 都 源 于 一 代 又 一 代 的 程序 员 对 效率 孜孜 不 倦 的 追求 。 


近年 来 ， 便 捷 的 辅助 开 友 工具 已 接近 饱和 状态 ， 各 技术 团队 也 纷纷 开始 寻找 新 的 可 以 提升 开 友 速度 的 入 口 。 对 于 “网 页 重 


构 ” 这 种 诞生 不 到 10 年 的 新 职业 来 说，“ 优 化 工作 流程 ”还 是 一 大 块 可 以 打磨 的 原石 。 不 能 否定 ， 一 个 工作 流 的 好 坏 会 直接 影 
响 工 作 的 效率 、 质 量 以 及 编码 积极 性 。 因 此 ， 我 们 团队 结合 程序 员 惯 用 的 行事 准则 一 一 DRY (Ооп' ї repeat yourself) , 2522 
规划 出 一 套 可 以 精简 了 见 余 、 重 复 、 琐 碎 环 节 的 高 效 工 作 流 ， 在 提升 工作 效率 的 同时 也 提升 工作 愉悦 度 。 


过 于 细 分 的 工作 流 有 一 个 显著 的 特点 丈 是 一 一 工作 内 容 过 于 单一 ， 这 也 是 细 分 工作 流 的 一 个 缺点 一 一 极 易 造成 从 事 这 一 工 
作者 产生 厌倦 的 心理 。“ 重 构 ” 处 于 细 分 工作 流 的 一 个 环节 ， 最 开始 设想 的 工作 职责 就 是 “ 切 图 一 一 拼合 成 页 面 ”， 以 至 于 以 
前 经 常 被 称 为 “页 面 仔 ”。 直 到 “ 重 构 ”开始 关注 目 身 的 职业 价值 ， 对 于 重 构 页 面 工作 流 的 再 次 细 分 ， 整 理 优化 出 一 套 相对 专业 
的 工作 流程 ( 见 图 5-44) 时 ， 才 能 让 重 构 的 工作 内 容 变 得 有 趣 。 
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5-44 。 重 构 工作 流程 图 


从 图 5-44 中 我 们 看 到 的 是 一 条 清晰 的 工作 沉 ， 想 要 对 这 种 变数 不 大 的 工作 沅 进行 优化 ， 生 成 模板 是 再 适合 不 过 的 了 。 固 定 
的 页 面 布局 、 图 片 尺 寺 、 内 容 模块 .…..“ 重 构 ” 的 页 面 输出 效率 从 优化 前 的 一 天 一 个 ， 提 升 到 了 一 天 多 个 (固定 模板 的 情况 下 ， 
见 图 5-45) 。 我 们 很 欣喜 有 这 样 的 效率 提升 。 
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图 5-45 ”模板 的 静态 活动 页 


前 面 提 人 到， 技术 团队 最 重要 的 两 个 考核 指标 是 效率 和 和 创新。 一成不变 的 事物 无 疑 是 创新 的 杀手 ， 效 率 在 不 断 提 升 ， 但 需求 并 
不 会 随 着 增加 ， 这 无 疑 会 导致 人 员 的 见 余 。 很 久 前 融 不 断 有 人 预言 “机 器 化 时 代 终 将 导致 失业 率 的 增加 ”， 人 们 倒是 渐渐 地 很 乐 
意 把 一 切 都 自动 化 。 目 动 化 解放 了 人 类 的 双手 ， 从 而 让 人 类 有 更 多 的 精力 投入 到 更 高 的 追求 中 。 


随 看 近 术 的 友 展 ， 重 构 的 工作 内 容 也 在 不 停 变 化 ， 从 静态 页 面 到 动 效 页 面 ， 再 到 近年 逐渐 火爆 的 VR 体 验 ， 我 们 需要 化 更 多 
的 精力 去 学 习 应 接 不 上 蝙 的 新 技术 ， 去 友 挥 我 们 的 创意 ， 把 工作 做 到 极 怪 ， 唯 有 提高 效率 才能 解放 创意 ， 而 不 是 守 着 效率 忽略 其 他 
重要 的 支线 。 我 们 相信 不 同 领域 的 友 展 历 史 忌 是 相似 的 ， 于 是 开始 尝试 顺应 时 代 的 步伐 ,把 重 构 工作 流 变 得 自动 化 起 来 。 


目 动 化 工作 流 的 构建 得 益 于 技术 的 不 断 进 步 ， 只 要 编写 相应 的 脚本 文件 ， 使 用 目 动 化 构件 工具 一 一 例如 gulp， 束 能 让 一 段 
程序 控制 男 一 段 程 序 ， 从 而 环 环 相 扣 ， 实 现 上 自动 化 流程 。 如 今 硬件 设施 是 有 了 ， 那 软件 设施 一 一 如 何 设计 自动 化 流程 又 是 一 个 
需要 思考 的 问题 。 


让 我 们 想象 一 | 间 工 厂 ， 员 工 是 不 是 只 有 在 老板 出 现 的 时 候 才 会 工作 呢 。 很 显然 不 是 ， 其 中 有 一 个 角色 起 着 重要 的 作用 ， 那 束 
是 监工 一 一 负责 安排 工作 、 监 督 工 人 、 把 探 产品 质量 、 为 事故 负责 。 监 工 很 明显 是 重要 角色 ， 我 们 从 这 一 生产 环节 中 得 到 不 小 
的 局 发 ， 设 计 了 一 套 自 动 化 工作 流程 ， 如 图 5-46 所 示 。 
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图 5-46 ”自动 化 工作 流 


从 图 5-46 中 能 看 到 ， 起 初 精简 的 模板 工作 流程 在 引入 自动 化 工作 流 后 ， 我 们 只 需要 把 更 多 的 精力 投入 到 黄色 人 齿轮 模块 便 能 
顺利 完成 整个 工作 流程 。 


最 初 的 网 页 只 要 能 显示 文字 和 彩色 的 图 片 束 已 经 让 人 惊叹 不 已 ， 随 着 技术 的 不 断 友 展 ， 网 页 呈现 出 太 多 玩法 了 ， 我 们 把 原来 
需要 经 过 5 个 工作 流程 才能 完成 的 工作 浓缩 到 两 步 完 成 ， 从 而 节省 出 更 多 的 时 间 用 于 更 好 地 提升 产品 价值 ， 这 才 是 设计 技术 团队 
的 价值 。 


55 ”结语 


从 对 和 象 ， 到 拉 巧 ， 表 到 灵感 ， 从 而 整合 出 一 个 创新 的 产品 ， 没 有 先后 顺序 之 分 ， 有 时 是 新 技术 的 诞生 促成 了 一 些 天 马 行 空 的 
创意 ， 从 而 诞生 了 一 蒜 产 品 ; 有 了 时 是 新 侨 的 概念 推动 了 技术 的 友 展 ， 从 而 众生 了 各 种 具有 创意 的 产品 ， 说 到 底 都 是 各 种 因素 的 相 
影响 。 因 此 ， 如 果 创 新 有 迹 可 循 ， 那 它 一 定 不 是 一 条 单行 道 ， 也 许 应 该 是 一 座 立 区 桥 。 


每 个 团队 都 可 以 遵照 本 章 提 到 的 关键 点 和 思路 ， 打 造 适合 目 身 团队 的 创新 方法 体系 。 但 问题 总 是 层出不穷 ， 更 重要 的 是 要 不 


间断 地 调整 方法 论 的 一 些 不 合理 之 处 ， 才 是 制胜 乙 道 。 本 章 提出 的 方法 论 只 是 为 我 们 解决 问题 铺设 轨道 ， 保 证 我 们 在 寻找 解决 方 
案 时 不 至 于 脱轨 或 停 沛 不 前 ， 记 住 要 握 好 方向 盘 ， 随 时 人 付 备 调整 万 向 ， 才 能 继续 在 创新 的 道路 上 翻 山 赵 岭 ， 勇 往 直 前 。 


